DEV Community

Mahmoud Elaraby
Mahmoud Elaraby

Posted on

Cool tip πŸ‘πŸ˜‰

Instagram vibe: The gradient background and glowing hover effect mimic trendy social media aesthetics.Simple to use: Just add the glow-btn class to any for instant flair.Customizable: Swap gradient colors or adjust box-shadow for different glow intensities.
πŸ‘‡πŸ‘‡

<button class="glow-btn">Click Me!</button>

<style>
.glow-btn {
  padding: 12px 24px;
  font-size: 16px;
  color: white;
  background: linear-gradient(45deg, #ff0066, #00ccff);
  border: none;
  border-radius: 25px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.glow-btn:hover {
  box-shadow: 0 0 15px rgba(255, 0, 102, 0.8), 0 0 30px rgba(0, 204, 255, 0.5);
  transition: box-shadow 0.3s ease;
}
</style>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)