About this snippet

Style your links as clean outline buttons that feature a subtle arrow animation on hover or focus. This modern CSS technique is great for minimal designs and improves user feedback.

Size
1.0 KB
Uses
HTML, CSS
Loads
Nothing external
Views
474
<div class="link-container">
  <a href="#" class="link-style-modern-4">
    Learn More <span class="arrow">→</span>
  </a>
</div>
/* Basic body styling for demonstration (can reuse) */
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-4 {
  display: inline-block;
  padding: 10px 20px;
  text-decoration: none;
  color: #007bff;
  border: 2px solid #007bff;
  border-radius: 5px;
  font-size: 1.1rem;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.link-style-modern-4 .arrow {
  display: inline-block;
  margin-left: 5px;
  transition: transform 0.3s ease;
}

.link-style-modern-4:hover,
.link-style-modern-4:focus {
  background-color: #007bff;
  color: white;
  border-color: #007bff;
  outline: none;
}

.link-style-modern-4:hover .arrow,
.link-style-modern-4:focus .arrow {
  transform: translateX(5px);
}
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