Back

Creating a Modern Gradient Button with Smooth Hover Effects

Learn how to design an eye-catching gradient button with seamless color transitions and interactive feedback.

HTML

The HTML structure for our gradient button is very simple - just a container div and a button element with the class gradient-button.


        <div class="button-container">
          <button class="gradient-button">Get Started</button>
        </div>

The button text can be customized to match your specific call-to-action.

CSS

First, we set up the container to center our button:


        .button-container {
          display: flex;
          justify-content: center;
          align-items: center;
        }

Next, we define the gradient button with CSS variables for easy customization:


        .gradient-button {
          --button-bg-from: #8B5CF6;
          --button-bg-to: #EC4899;
          --button-padding-x: 28px;
          --button-padding-y: 14px;
          --button-font-size: 16px;
          --button-radius: 8px;
          --button-shadow-size: 12px;
          --button-transition-time: 0.3s;
          
          position: relative;
          font-family: system-ui, -apple-system, sans-serif;
          font-weight: 600;
          font-size: var(--button-font-size);
          color: white;
          background: linear-gradient(135deg, var(--button-bg-from), var(--button-bg-to));
          background-size: 200% 100%;
          background-position: 0 0;
          border: none;
          border-radius: var(--button-radius);
          padding: var(--button-padding-y) var(--button-padding-x);
          cursor: pointer;
          box-shadow: 0 var(--button-shadow-size) 20px -8px rgba(139, 92, 246, 0.5);
          transition: all var(--button-transition-time) ease;
          overflow: hidden;
          outline: none;
          z-index: 1;
        }

The key properties here: - We define a linear gradient from purple to pink for a modern look - The background-size is set larger than the button to prepare for possible background position animation - We add a subtle drop shadow that matches the gradient start color - The z-index and position:relative prepare the button to work with the pseudo-element To create a smooth gradient transition on hover, we use a pseudo-element:


        .gradient-button::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(135deg, var(--button-bg-to), var(--button-bg-from));
          opacity: 0;
          z-index: -1;
          transition: opacity var(--button-transition-time) ease;
          border-radius: var(--button-radius);
        }

This pseudo-element contains the reversed gradient, which will fade in on hover for a smooth color transition. Next, we add hover and active states for interactive feedback:


        .gradient-button:hover {
          transform: translateY(-3px);
          box-shadow: 0 var(--button-shadow-size) 25px -5px rgba(139, 92, 246, 0.6);
        }
        
        .gradient-button:hover::before {
          opacity: 1;
        }
        
        .gradient-button:active {
          transform: translateY(-1px);
          box-shadow: 0 var(--button-shadow-size) 15px -8px rgba(139, 92, 246, 0.4);
        }

The hover effect does several things: - Lifts the button slightly to create a "floating" effect - Enhances the shadow to increase the sense of elevation - Reveals the reversed gradient through the pseudo-element for a smooth color shift The active state reduces these effects slightly to create a subtle "press" feedback. We also add a focus state for accessibility:


        /* Focus state for accessibility */
        .gradient-button:focus-visible {
          outline: 3px solid rgba(139, 92, 246, 0.5);
          outline-offset: 2px;
        }

Finally, we provide alternative color schemes for versatility:


        /* Alternative color schemes */
        .gradient-button.blue-green {
          --button-bg-from: #3B82F6;
          --button-bg-to: #10B981;
          box-shadow: 0 var(--button-shadow-size) 20px -8px rgba(59, 130, 246, 0.5);
        }
        
        .gradient-button.blue-green:hover {
          box-shadow: 0 var(--button-shadow-size) 25px -5px rgba(59, 130, 246, 0.6);
        }
        
        .gradient-button.orange-red {
          --button-bg-from: #F59E0B;
          --button-bg-to: #EF4444;
          box-shadow: 0 var(--button-shadow-size) 20px -8px rgba(245, 158, 11, 0.5);
        }
        
        .gradient-button.orange-red:hover {
          box-shadow: 0 var(--button-shadow-size) 25px -5px rgba(245, 158, 11, 0.6);
        }

These classes override the gradient colors and shadows, allowing you to use different color schemes for different purposes or sections of your site. This gradient button offers several advantages: - Visual appeal: The gradient colors create a modern, eye-catching look that draws attention. - Interactive feedback: The hover and active states provide clear, satisfying feedback. - Smooth transitions: The pseudo-element approach allows for smooth gradient transitions without jarring changes. - Dimensional feel: The elevation effect with shadows adds depth to the interface. - Versatility: The color variants make it adaptable to different brand colors and contexts. This button style is perfect for primary calls-to-action on landing pages, sign-up forms, and checkout processes where you want to draw attention to the most important action.

Whole code

<div class="button-container">
  <button class="gradient-button">Get Started</button>
</div>

<style>
.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.gradient-button {
  --button-bg-from: #8B5CF6;
  --button-bg-to: #EC4899;
  --button-padding-x: 28px;
  --button-padding-y: 14px;
  --button-font-size: 16px;
  --button-radius: 8px;
  --button-shadow-size: 12px;
  --button-transition-time: 0.3s;
  
  position: relative;
  font-family: system-ui, -apple-system, sans-serif;
  font-weight: 600;
  font-size: var(--button-font-size);
  color: white;
  background: linear-gradient(135deg, var(--button-bg-from), var(--button-bg-to));
  background-size: 200% 100%;
  background-position: 0 0;
  border: none;
  border-radius: var(--button-radius);
  padding: var(--button-padding-y) var(--button-padding-x);
  cursor: pointer;
  box-shadow: 0 var(--button-shadow-size) 20px -8px rgba(139, 92, 246, 0.5);
  transition: all var(--button-transition-time) ease;
  overflow: hidden;
  outline: none;
  z-index: 1;
}

.gradient-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--button-bg-to), var(--button-bg-from));
  opacity: 0;
  z-index: -1;
  transition: opacity var(--button-transition-time) ease;
  border-radius: var(--button-radius);
}

.gradient-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 var(--button-shadow-size) 25px -5px rgba(139, 92, 246, 0.6);
}

.gradient-button:hover::before {
  opacity: 1;
}

.gradient-button:active {
  transform: translateY(-1px);
  box-shadow: 0 var(--button-shadow-size) 15px -8px rgba(139, 92, 246, 0.4);
}

/* Focus state for accessibility */
.gradient-button:focus-visible {
  outline: 3px solid rgba(139, 92, 246, 0.5);
  outline-offset: 2px;
}

/* Alternative color schemes */
.gradient-button.blue-green {
  --button-bg-from: #3B82F6;
  --button-bg-to: #10B981;
  box-shadow: 0 var(--button-shadow-size) 20px -8px rgba(59, 130, 246, 0.5);
}

.gradient-button.blue-green:hover {
  box-shadow: 0 var(--button-shadow-size) 25px -5px rgba(59, 130, 246, 0.6);
}

.gradient-button.orange-red {
  --button-bg-from: #F59E0B;
  --button-bg-to: #EF4444;
  box-shadow: 0 var(--button-shadow-size) 20px -8px rgba(245, 158, 11, 0.5);
}

.gradient-button.orange-red:hover {
  box-shadow: 0 var(--button-shadow-size) 25px -5px rgba(245, 158, 11, 0.6);
}
</style>

Thank you for reading this article.

Creating a Modern Gradient Button with Smooth Hover Effects

HTML

CSS

Whole code

Comments

More buttons

Similar

See also