About this snippet

Learn to style HTML links as attractive gradient buttons with a subtle shadow effect using CSS. This snippet offers a modern, clickable look for your call to action links, enhancing visual appeal.

Size
1.0 KB
Uses
HTML, CSS
Loads
Nothing external
Views
365
<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 */
}
Esc
↑↓ moveEnter select

Start from a template

Open an .html file, or HTML, CSS, JS, Markdown, Less or TypeScript files. You can also drop them here. Styles and scripts go into their panes.

Share

Source

Keyboard shortcuts

Save