CSS Gradient Button Link with Shadow (Code Snippet)

<div class="link-container">
  <a href="#" class="link-style-modern-2">Gradient Button</a>
</div>

/* Basic body styling for demonstration (can reuse from above) */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  font-family: 'Arial', sans-serif;
  background-color: #f0f2f5;
  margin: 0;
}
.link-container {
  padding: 20px;
}

.link-style-modern-2 {
  display: inline-block;
  padding: 12px 25px;
  text-decoration: none;
  color: white;
  font-size: 1.1rem;
  font-weight: bold;
  border-radius: 50px; /* Pill shape */
  background-image: linear-gradient(45deg, #6a11cb 0%, #2575fc 100%);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-image 0.3s ease;
}

.link-style-modern-2:hover,
.link-style-modern-2:focus {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  background-image: linear-gradient(45deg, #2575fc 0%, #6a11cb 100%); /* Shift gradient */
  outline: none; 
  color: white; /* Ensure text color remains on focus */
}

CSS Gradient Button Link with Shadow

Share Code Snippet