About this snippet

This example will show you how to style HTML links with CSS.

Size
2.9 KB
Uses
HTML, CSS
Loads
Nothing external
Views
473
<div class="links">
	<a href="#" class="style1">Link 1</a>
	<a href="#" class="style2">Link 2</a>
	<a href="#" class="style3">Link 3</a>
</div>
.links {
    display: inline-flex;
    flex-direction:column;
    gap: 20px;
    padding: 20px;
}
.style1 {
  display: inline-block;
  padding: 12px 24px;
  text-decoration: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background-color: #e9ecef;
  color: #212529;
  font-weight: 600;
  font-size: 1rem;
  border-radius: 8px;
  border: 1px solid transparent;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  cursor: pointer;
  text-transform: none;
}
.style1:hover {
  background-color: #dee2e6;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}
.style1:active {
  background-color: #ced4da;
  transform: translateY(0px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.style1:focus-visible {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}
.style2 {
  display: inline-block;
  padding: 14px 28px;
  text-decoration: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);
  color: #ffffff;
  font-weight: 600;
  font-size: 1.05rem;
  border-radius: 30px;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-position 0.5s ease;
  background-size: 150% auto;
  background-position: 0% 0%;
  cursor: pointer;
  text-align: center;
}
.style2:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.2);
  background-position: 100% 0%;
}
.style2:active {
  transform: translateY(0px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  background-position: 50% 0%;
}
.style2:focus-visible {
  outline: 2px solid #80bdff;
  outline-offset: 2px;
}
.style3 {
  display: inline-block;
  padding: 12px 25px;
  text-decoration: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background-color: #e74c3c;
  color: #ffffff;
  font-weight: 500;
  font-size: 1rem;
  border-radius: 6px;
  border: none;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  transition: background-color 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}
.style3:hover {
  background-color: #c0392b;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.style3:active {
  background-color: #a93226;
  transform: translateY(0px);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.style3:focus-visible {
  outline: 2px solid #f1948a;
  outline-offset: 2px;
}
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