CodePen Embed - 25 different CSS button

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>CSS Styled Buttons</title>
</head>
<body>
  <a href="#" class="button default">Default Button</a>
  <a href="#" class="button primary">Primary Button</a>
  <a href="#" class="button secondary">Secondary Button</a>
  <a href="#" class="button gradient">Gradient Button</a>
  <a href="#" class="button rounded">Rounded Button</a>
  <a href="#" class="button borderless">Borderless Button</a>
  <a href="#" class="button shadow">Shadow Button</a>
  <a href="#" class="button italic">Italic Button</a>
  <a href="#" class="button uppercase">Uppercase Button</a>
  <a href="#" class="button animated">Animated Button</a>
  <a href="#" class="button dashed">Dashed Border Button</a>
  <a href="#" class="button neon">Neon Button</a>
  <a href="#" class="button outline">Outline Button</a>
  <a href="#" class="button glow">Glowing Button</a>
  <a href="#" class="button pulse">Pulsating Button</a>
  <a href="#" class="button wide">Wide Button</a>
  <a href="#" class="button transparent">Transparent Button</a>
  <a href="#" class="button flip">Flip Effect Button</a>
  <a href="#" class="button gradient-border">Gradient Border Button</a>
  <a href="#" class="button rainbow">Rainbow Button</a>
  <a href="#" class="button hover-scale">Hover Scale Button</a>
  <a href="#" class="button shake">Shaking Button</a>
  <a href="#" class="button invert">Inverted Colors Button</a>
  <a href="#" class="button pulse-border">Pulse Border Button</a>
  <a href="#" class="button transparent-bg">Transparent Background Button</a>
</body>
</html>

body {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #f0f0f0;
}

.button {
  display: inline-block;
  padding: 10px 20px;
  margin: 10px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}

.default {
  border: 2px solid #3498db;
  color: #3498db;
  background-color: #fff;
}

.default:hover {
  background-color: #3498db;
  color: #fff;
}

.primary {
  border: 2px solid #2ecc71;
  color: #2ecc71;
  background-color: #fff;
}

.primary:hover {
  background-color: #2ecc71;
  color: #fff;
}

.secondary {
  border: 2px solid #e74c3c;
  color: #e74c3c;
  background-color: #fff;
}

.secondary:hover {
  background-color: #e74c3c;
  color: #fff;
}

.gradient {
  background: linear-gradient(to right, #3498db, #2ecc71);
  color: #fff;
  border: none;
}

.rounded {
  border-radius: 20px;
  border: 2px solid #9b59b6;
  color: #9b59b6;
  background-color: #fff;
}

.rounded:hover {
  background-color: #9b59b6;
  color: #fff;
}

.borderless {
  border: none;
  color: #e67e22;
  background-color: #fff;
}

.borderless:hover {
  background-color: #e67e22;
  color: #fff;
}

.shadow {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border: 2px solid #27ae60;
  color: #27ae60;
  background-color: #fff;
}

.shadow:hover {
  background-color: #27ae60;
  color: #fff;
}

.italic {
  font-style: italic;
  border: 2px solid #3498db;
  color: #3498db;
  background-color: #fff;
}

.italic:hover {
  background-color: #3498db;
  color: #fff;
}

.uppercase {
  text-transform: uppercase;
  border: 2px solid #e74c3c;
  color: #e74c3c;
  background-color: #fff;
}

.uppercase:hover {
  background-color: #e74c3c;
  color: #fff;
}

.animated {
  animation: pulse 1s infinite;
  border: 2px solid #2ecc71;
  color: #2ecc71;
  background-color: #fff;
}

.animated:hover {
  background-color: #2ecc71;
  color: #fff;
}

.dashed {
  border: 2px dashed #3498db;
  color: #3498db;
  background-color: #fff;
}

.dashed:hover {
  background-color: #3498db;
  color: #fff;
}

.neon {
  color: #00ff00;
  text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00;
}

.neon:hover {
  color: #fff;
}

.outline {
  border: 2px solid #e67e22;
  color: #e67e22;
  background-color: #fff;
}

.outline:hover {
  background-color: #e67e22;
  color: #fff;
}

.glow {
  box-shadow: 0 0 10px #3498db;
  border: 2px solid #3498db;
  color: #3498db;
  background-color: #fff;
}

.glow:hover {
  box-shadow: 0 0 20px #3498db;
  background-color: #3498db;
  color: #fff;
}

.pulse {
  animation: pulse 1s infinite;
  border: 2px solid #9b59b6;
  color: #9b59b6;
  background-color: #fff;
}

.pulse:hover {
  background-color: #9b59b6;
  color: #fff;
}

.wide {
  padding: 10px 40px;
  border: 2px solid #27ae60;
  color: #27ae60;
  background-color: #fff;
}

.wide:hover {
  background-color: #27ae60;
  color: #fff;
}

.transparent {
  background-color: transparent;
  color: #3498db;
  border: 2px solid #3498db;
}

.transparent:hover {
  background-color: #3498db;
  color: #fff;
}

.flip {
  perspective: 1000px;
}

.flip:hover .button {
  transform: rotateY(180deg);
}

.gradient-border {
  background: linear-gradient(to right, #2ecc71, #e74c3c);
  border: 2px solid transparent;
  background-clip: border-box;
  color: #fff;
}

.gradient-border:hover {
  border-color: #fff;
}

.rainbow {
  background: linear-gradient(to right, violet, indigo, blue, green, yellow, orange, red);
  color: #fff;
  border: none;
}

.hover-scale {
  transition: transform 0.3s;
}

.hover-scale:hover {
  transform: scale(1.2);
}

.shake {
  animation: shake 0.5s;
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  50% {
    transform: translateX(5px);
  }
  75% {
    transform: translateX(-5px);
  }
}

.invert {
  filter: invert(100%);
  border: 2px solid #3498db;
  color: #3498db;
  background-color: #fff;
}

.invert:hover {
  background-color: #3498db;
  color: #fff;
}

.pulse-border {
  animation: pulse-border 1s infinite;
  border: 2px solid #e67e22;
  color: #e67e22;
  background-color: #fff;
}

.pulse-border:hover {
  background-color: #e67e22;
  color: #fff;
}

@keyframes pulse-border {
  0% {
    border-color: #e67e22;
  }
  50% {
    border-color: #3498db;
  }
  100% {
    border-color: #e67e22;
  }
}

.transparent-bg {
  background-color: transparent;
  color: #e74c3c;
  border: 2px solid #e74c3c;
}

.transparent-bg:hover {
  background-color: #e74c3c;
  color: #fff;
}

This Pen is owned by SJM Developers on CodePen.

See more by @SJMDevelopers on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.