Buttons - WebDevTales

51 Buttons

Modern, responsive CSS Buttons for sleek UI design

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  
<button>
  <div class="icon-wrapper">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <path fill="none" d="M0 0h24v24H0z" />
      <path d="M1.946 9.315c-.522-.174-.527-.455.01-.634l19.087-6.362c.529-.176.832.12.684.638l-5.454 19.086c-.15.529-.455.547-.679.045L12 14l6-8-8 6-8.054-2.685z" />
    </svg>
  </div>
  <span>Next</span>
</button>

body {
  font-family: 'Poppins', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background:white;
  margin: 0;
  overflow: hidden;
}

button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.8em 2em;
  border: none;
  border-radius: 10px;
  background: rgba(7, 7, 7, 01);
  backdrop-filter: blur(10px);
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
  color: #fff;
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease;
}

button:hover {
  transform: translateY(-5px);
  background: white;
  color: black;
  border: 3px solid black;
  box-shadow: 0px 12px 20px rgb(81, 84, 82);
}

button:active {
  transform: translateY(0);
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
}

button span {
  z-index: 2;
  position: relative;
}




button .icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  margin-right: 0.8em;
  border-radius: 20%;
  border: 1px solid white;
  background: linear-gradient(135deg, #000000, #0e0f0f);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease-in-out;
}

button:hover .icon-wrapper {
  transform: scale(1.7) rotate(45deg);
  border-radius: 50%;
  background: white;
  box-shadow: none;
}

button svg {
  fill: #fff;
  width: 20px;
  height: 20px;
}

button:hover svg{
    fill: black;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  
<button class="diagonal-edge-button"><span>Launch</span></button>

body {
  font-family: "Arial", sans-serif;
  background: linear-gradient(135deg, #0e0e0e, #121212);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.diagonal-edge-button {
  position: relative;
  padding: 1rem 3rem;
  font-size: 1.5rem;
  font-weight: bold;
  color: #fff;
  background: transparent;
  border: 2px solid #03fffb;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  border-radius: 48px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-radius 0.3s ease;
}

/* Layered Glowing Diagonal Effect */
.diagonal-edge-button::before,
.diagonal-edge-button::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #d41200, #40ffc9);
  transform: skewX(-1deg) translateX(-90%);
  z-index: -2;
  transition: transform 0.5s ease;
}

.diagonal-edge-button::after {
  background: linear-gradient(135deg, #4050ff, #d40000);
  z-index: -1;
  transform: skewX(-1deg) translateX(90%);
}

/* Hover Effects for Glowing Edges and Smooth Slide-in */
.diagonal-edge-button:hover {
  color: #121212;
  border-radius: 5px;
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
  box-shadow: 0 4px 16px rgba(255, 255, 255, 0.4);
  animation: movingborder 2s linear infinite;
}

.diagonal-edge-button:hover::before {
  transform: skewX(-45deg) translateX(0);
}

.diagonal-edge-button:hover::after {
  transform: skewX(-45deg) translateX(0);
}

/* Smooth 3D Animation on Hover */
.diagonal-edge-button:hover {
  transform: scale(1.05) rotateZ(2deg);
}

/* Glow effect for text on hover */
.diagonal-edge-button:hover span {
  color: #000000;
}

.diagonal-edge-button span {
  position: relative;
  z-index: 1;
  transition: color 0.3s ease;
}

@keyframes movingborder{
  0% {
    border-color: #03fffb;
  }
  25% {
    border-color: #fb0505;
  }
  50% {
    border-color: #000000;
  }
  75% {
    border-color: #ff0303;
  }
  100% {
    border-color: #03fffb;
  }
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<button class="btn-stripe">Welcome</button>

body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #000000; /* Light background for better contrast */
}

.btn-stripe {
  color: #f43676; 
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid #f43676; 
  padding: 10px 20px;
  font-size: 17px;
  cursor: pointer;
  font-weight: bold;
  background: transparent;
  position: relative;
  transition: all 0.5s ease-in-out;
  overflow: hidden;
}

.btn-stripe:hover {
  color: rgb(0, 0, 0);
}

.btn-stripe::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 120%;
  top: 0;
  left: -120%;
  background: repeating-linear-gradient(
    45deg,
    #f43676, /* Blue */
    #f43676 10px,
    #00ffb7 10px, /* Teal */
    #15f0c8 20px
  );
  z-index: -1;
  transition: all 0.6s ease-in-out;
}

.btn-stripe:hover::before {
  left: 0;
}
.btn-stripe:active {
  transform: scale(0.95);
  color: white;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<button>
  <a href="#"><span>Activate</span></a>
</button>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: black;
  font-family: 'Arial', sans-serif;
  overflow: hidden;
}

/* Button Container */
button {
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 0;
  position: relative;
}

/* Anchor Button Styles */
a {
  position: relative;
  display: inline-block;
  padding: 20px 60px;
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  color: #ffffff;
  border: 2px solid #00ffcc;
  border-radius: 50px;
  background: rgb(0, 0, 0);
  box-shadow: 0 8px 15px rgba(0, 255, 204, 0.2);
  backdrop-filter: blur(8px);
  overflow: hidden;
  transition: all 0.4s ease-in-out;
  z-index: 1;
}

a span {
  position: relative;
  z-index: 2;
  color: #ffffff;
  text-shadow: 0 0 10px #00ffcc;
}

/* Hover Effects */
a:hover {
  color: #000000;
  border: 6px double #00ffcc;
  border-radius: 2px;
  box-shadow: 0 12px 30px rgba(0, 255, 204, 0.5), 0 0 20px rgba(0, 102, 255, 0.4);
  transform: scale(1.1);
}

a:hover span {
  animation: textGlow 1s infinite alternate;
}

/* Glow Effect on Text */
@keyframes textGlow {
  0% {
    text-shadow: 0 0 5px #00ffcc, 0 0 10px #0066ff;
  }
  100% {
    text-shadow: 0 0 15px #0066ff, 0 0 20px #00ffcc;
  }
}

/* Orbital Effects */
a::before,
a::after {
  content: '';
  position: absolute;
  width: 200%;
  height: 200%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 255, 204, 01), transparent);
  animation: orbit 3s linear infinite;
  z-index: 0;
}

/* Orbit 1 */
a::before {
  top: -150%;
  left: -150%;
  animation-duration: 4s;
  animation-direction: reverse;
}

/* Orbit 2 */
a::after {
  bottom: -150%;
  right: -150%;
  animation-duration: 6s;
}

/* Orbit Animation */
@keyframes orbit {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Focus Effects */
a:focus {
  outline: none;
  box-shadow: 0 0 10px #00ffcc, 0 0 30px rgba(0, 255, 204, 0.5);
}

button:focus {
  outline: none;
}

/* Active State */
a:active {
  transform: translateY(3px);
  box-shadow: 0 5px 15px rgba(0, 255, 204, 0.3);
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  
<button class="neon-lines-button">Dynamic Glow</button>

body {
  font-family: Arial, sans-serif;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}

.neon-lines-button {
  position: relative;
  padding: 1rem 2rem;
  font-size: 1.2rem;
  color: #fff;
  background: #111;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  overflow: hidden;
  z-index: 0;
}

.neon-lines-button:before, 
.neon-lines-button:after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #00ffff 50%, rgba(0, 0, 0, 0) 100%);
  z-index: -1;
  animation: neon-lines 2s linear infinite;
}

.neon-lines-button:after {
  animation-delay: 1s;
}

@keyframes neon-lines {
  0% {
      left: -100%;
  }
  100% {
      left: 100%;
  }
}

.neon-lines-button:hover {
  color: #00ffff;
  box-shadow: 0 0 1rem #00ffff;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  
<button class="neon-pulse-button">Pulse</button>

body {
  font-family: Arial, sans-serif;
  background: #111;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.neon-pulse-button {
  padding: 1rem 3rem;
  font-size: 1.5rem;
  color: #fff;
  background: #111;
  border: 0.2rem solid #00ffff;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  text-transform: uppercase;
  border-radius: 3rem;
  transition: all 0.3s ease;
  box-shadow: 0 0 3rem rgba(0, 255, 255, 0.4);
}

.neon-pulse-button:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(0, 255, 255, 0.4) 0%, transparent 70%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: pulse 2s infinite;
}

.neon-pulse-button:hover {
  box-shadow: 0 0 5rem rgba(0, 255, 255, 0.6);
}

@keyframes pulse {
  0% {
      transform: translate(-50%, -50%) scale(0.5);
  }
  50% {
      transform: translate(-50%, -50%) scale(1);
  }
  100% {
      transform: translate(-50%, -50%) scale(0.5);
  }
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  
<button class="floating-neon-button">Hover Me</button>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background: linear-gradient(135deg, #0f0f0f, #1b1b1b);
  font-family: 'Arial', sans-serif;
  overflow: hidden;
}

.floating-neon-button {
  position: relative;
  padding: 1.2rem 2.4rem;
  font-size: 1.4rem;
  font-weight: bold;
  color: #fff;
  background: linear-gradient(135deg, #232323, #2b2b2b);
  border: none;
  border-radius: 0.8rem;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  box-shadow: 0 0 2rem rgba(0, 255, 255, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  z-index: 1;
}

.floating-neon-button::before,
.floating-neon-button::after {
  content: '';
  position: absolute;
  inset: -0.5rem;
  border-radius: 1rem;
  background: conic-gradient(
    from 0deg,
    #ff00ff,
    #00ffff,
    #00ff00,
    #ff0000,
    #ff00ff
  );
  z-index: -1;
  filter: blur(1.2rem);
  opacity: 0.7;
  animation: spin-light 5s linear infinite;
}

.floating-neon-button::after {
  inset: -0.8rem;
  filter: blur(2rem);
  opacity: 0.5;
}

.floating-neon-button:hover {
  transform: translateY(-0.5rem) scale(1.05);
  box-shadow: 0 0 3rem rgba(0, 255, 255, 0.7);
}

.floating-neon-button:active {
  transform: translateY(0) scale(1);
  box-shadow: 0 0 1rem rgba(0, 255, 255, 0.5);
}

@keyframes spin-light {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  
<button class="neon-flicker-button">Flicker</button>

body {
  font-family: Arial, sans-serif;
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.neon-flicker-button {
  padding: 1rem 2.5rem;
  font-size: 1.3rem;
  text-transform: uppercase;
  color: #fff;
  background: #111;
  border: 0.2rem solid transparent;
  background-clip: padding-box;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
}

.neon-flicker-button:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #ff7e00, #ff0000);
  z-index: 1;
  animation: flicker 1.5s infinite alternate;
}

.neon-flicker-button:hover {
  color: #ffe600;
  box-shadow: 0 0 2rem #ff4500;
}

@keyframes flicker {
  0% {
      transform: scale(1) translateY(0);
      opacity: 0.5;
  }
  25% {
      transform: scale(1.05) translateY(1rem);
      opacity: 0.7;
  }
  50% {
      transform: scale(1) translateY(-1rem);
      opacity: 0.8;
  }
  75% {
      transform: scale(1.1) translateY(0);
      opacity: 0.6;
  }
  100% {
      transform: scale(1) translateY(-1rem);
      opacity: 0.9;
  }
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  
<button class="neon-split-button">Train</button>

body {
  font-family: Arial, sans-serif;
  background: #111;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.neon-split-button {
  padding: 1rem 2rem;
  font-size: 1.4rem;
  text-transform: uppercase;
  color: #fff;
  border: 0.2rem solid transparent;
  position: relative;
  background: linear-gradient(135deg, #232323, #090709);
  background-clip: padding-box;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease;
  z-index: 0;
}

.neon-split-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: linear-gradient(45deg, #ff00ff, #00ffff);
  transition: all 0.4s ease-in-out;
  z-index: -1;
}

.neon-split-button:hover {
  color: #fff;
  box-shadow: 0 0 1.5rem rgba(0, 255, 255, 0.5);
}

.neon-split-button:hover::before {
  width: 100%;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  
<button class="neon-outline-button">Glow Outline</button>

body {
  font-family: Arial, sans-serif;
  background: #111;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.neon-outline-button {
  padding: 1rem 2rem;
  font-size: 1.4rem;
  color: #fff;
  background: transparent;
  border: 0.2rem solid #00ff00;
  border-radius: 3rem;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
  transition: all 0.7s ease;
}

.neon-outline-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 3rem;
  opacity: 0;
  transition: all 0.5s ease;
}

.neon-outline-button:hover {
  color: #00ff00;
  box-shadow: 0 0 2rem #00ff00;
  transform: scale(1.1) rotate(30deg);
  border-radius: 10px;
}

.neon-outline-button:hover::before {
  opacity: 1;
  
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<button class="neon-borderless-button">Secret</button>


body {
  font-family: Arial, sans-serif;
  background: #111;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.neon-borderless-button {
  padding: 1rem 3rem;
  font-size: 1.4rem;
  color: #fff;
  background: #151515;
  border: 0.2rem solid transparent;
  border-top: 1rem groove white;
  border-radius: 3rem;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
  transition: all 0.4s ease;
}



.neon-borderless-button:hover {
  color: #ff8400;
  border: 0.2rem solid #ff6a00;
}

<!-- No JS code needed for this Element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<button class="neon-border-button">Groove</button>


body {
  font-family: Arial, sans-serif;
  background: #efeeee;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.neon-border-button {
  padding: 1rem 3rem;
  font-size: 1.4rem;
  color: #141414;
  background: transparent;
  border: 7px groove #ff4d00;
  border-radius: 3rem;
  cursor: pointer;
  position: relative;
  text-transform: uppercase;
  transition: all 0.3s ease;
}

.neon-border-button::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 1rem;
  background: transparent;
  box-shadow: 0 0 8px #ef7c08, 0 0 20px #c93803, 0 0 40px #ff4400;
  opacity: 0;
  transition: all 0.5s ease;
}

.neon-border-button:hover {
  color: #ff7700;
  border: 13px solid #ff6f00;
}

.neon-border-button:hover::after {
  opacity: 1;
  transform: scale(1.05);
}

<!-- No JS code needed for this Element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<button class="neon-glow-button">Glow</button>


body {
  font-family: Arial, sans-serif;
  background: #111;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.neon-glow-button {
  padding: 1rem 2.5rem;
  font-size: 1.4rem;
  color: #fff;
  background-color: transparent;
  border: 2px solid #ff0000;
  border-radius: 1rem;
  cursor: pointer;
  position: relative;
  text-transform: uppercase;
  transition: all 0.3s ease;
}


.neon-glow-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #dc00a5;
  border-radius: 1rem;
  color: black;
  z-index: -1;
  border: 10px groove black;
  transform: scale(0);
  transition: all 0.4s ease;
}

.neon-glow-button:hover {
  color: #000000;
  font-weight: bold;
  box-shadow: 0 0 10px #ff006f, 0 0 30px #ec1f1f, 0 0 60px #ff00f7;
}

.neon-glow-button:hover::before {
  transform: scale(1.05);
}

<!-- No JS code needed for this Element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<button class="futuristic-button">Hover Me</button>


body {
  font-family: Arial, sans-serif;
  background: #ccbfbf;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.futuristic-button {
  padding: 1rem 3rem;
  font-size: 1.4rem;
  color: #fff;
  background: transparent;
  border: 2px solid transparent;
  border-bottom: 5px solid #ffffff;
  border-radius: 2rem;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
  transition: all 04s ease;
  font-weight: bold;
} 

.futuristic-button::before {
  content: ' ';
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  width: 300%;
  z-index: -1;
  background: #f60d62;
  transform: translateX(-50%) scaleX(0);
  transition: transform 05s ease-out;
}

.futuristic-button:hover {
  color: #000000;
  box-shadow: 0 0 20px #ff0000, 0 0 50px #ed0748, 0 0 100px #ff009d;
}

.futuristic-button:hover::before {
  transform: translateX(-50%) scaleX(1.5);
}

<!-- No JS code needed for this Element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<button class="wave-border-button">Weeeee 🤪</button>


body {
  font-family: Arial, sans-serif;
  background: #111;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}

.wave-border-button {
  padding: 1rem 2rem;
  font-size: 1.4rem;
  color: #fff;
  background: transparent;
  border: 2px solid #ff0099;
  border-radius: 5px;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: bold;
  position: relative;
  overflow: hidden;
  transition: all 03s ease-in-out;
}


.wave-border-button:hover {
  color: #ff0099;
  transform: scale(1.1) rotate(1440deg) translateY(-20px);
  box-shadow: 0 0 15px #ff0099, 0 0 30px #ff0099;
  border-radius: 50PX;
}

<!-- No JS code needed for this Element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  
<button class="neon-outline-button">HOVER ME</button>

body {
  font-family: Arial, sans-serif;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}

.neon-outline-button {
  padding: 1rem 2rem;
  font-size: 1.2rem;
  color: #fff;
  text-transform: uppercase;
  border: 0.2rem solid transparent;
  border-image: linear-gradient(90deg, #ff00ff, #00ffff);
  border-image-slice: 1;
  background-color: transparent;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.8s ease-in-out;
}

.neon-outline-button:before {
  content: '';
  position: absolute;
  inset: 0;
  border: 0.2rem solid transparent;
  border-image: linear-gradient(90deg, #ff00ff, #00ffff);
  border-image-slice: 1;
  filter: blur(0.5rem);
  opacity: 0.7;
  transition: all 0.4s ease-in-out;
}

.neon-outline-button:hover {
  color: #00ffff;
  box-shadow: 0 0 1rem #00ffff;
  transform: rotate(720deg) scale(1.4);
}

.neon-outline-button:hover:before {
  filter: blur(1rem);
  opacity: 1;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  
<button class="glitch-button">Ripple</button>

body {
  font-family: Arial, sans-serif;
  background: #111;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.glitch-button {
  padding: 1rem 2rem;
  font-size: 1.4rem;
  color: #fff;
  background-color: transparent;
  border: 2px solid #00ff00;
  border-radius: 2rem;
  cursor: pointer;
  position: relative;
  text-transform: uppercase;
  font-weight: bold;
  animation: glitch 1.2s infinite;
  overflow: hidden;
}

.glitch-button::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #00ff00;
  animation: glitch-effect 0.8s infinite;
  z-index: -1;
}

@keyframes glitch {
  0% { transform: skewX(0deg); }
  25% { transform: skewX(-10deg); }
  50% { transform: skewX(10deg); }
  75% { transform: skewX(-10deg); }
  100% { transform: skewX(0deg); }
}

@keyframes glitch-effect {
  0% { left: 0; opacity: 1; }
  25% { left: -10px; opacity: 0.7; }
  50% { left: 10px; opacity: 0.5; }
  75% { left: -10px; opacity: 0.7; }
  100% { left: 0; opacity: 1; }
}

.glitch-button:hover {
  color: #f8f9f8;
  box-shadow: 0 0 20px #00ff00, 0 0 60px #00ff00;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  
<button class="morphing-button">Ripple</button>

body {
  font-family: Arial, sans-serif;
  background: #0d0d0d;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
} 

.morphing-button {
  padding: 1rem 2.5rem;
  font-size: 1.5rem;
  color: #fff;
  background: transparent;
  border: 2px solid #ff0055;
  border-radius: 0.5rem;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
  font-weight: bold;
  transition: all 0.4s ease-in-out;
}

.morphing-button:hover {
  border-radius: 2rem;
  background: #ff0055;
  color: #0d0d0d;
  box-shadow: 0 0 20px #ff0055, 0 0 40px #ff0055;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  
<button class="neon-frame-button">Ripple</button>

body {
  font-family: Arial, sans-serif;
  background: #e2dddd;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.neon-frame-button {
  padding: 1rem 2rem;
  font-size: 1.5rem;
  color: #fff;
  background: transparent;
  border: 0;
  position: relative;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: bold;
  transition: transform 0.5s ease;
}

.neon-frame-button:hover {
  transform: rotate(10deg) scale(1.2);
}

.neon-frame-button::before,
.neon-frame-button::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  border-radius: 0.5rem;
  background: linear-gradient(90deg, #00ffff, #ff00ff) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  transition: all 0.5s ease;
  z-index: -1;
}

.neon-frame-button:hover::before {
  inset: -0.2rem;
  border: 2.4rem groove #212020;
  box-shadow: 0 0 15px #ff00ff, 0 0 30px #ff00ff;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  
<button class="split-button">
  <span data-text="Split">Split</span>
</button>

body {
  font-family: Arial, sans-serif;
  background: #0b0b0b;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.split-button {
  padding: 1rem 3rem;
  font-size: 1.5rem;
  color: #fff;
  background: transparent;
  border: 2px solid #00ff88;
  border-radius: 0.5rem;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: bold;
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease-in-out;
}

.split-button span {
  position: relative;
  display: inline-block;
}

.split-button span::before,
.split-button span::after {
  content: attr(data-text);
  position: absolute;
  color: #00ff88;
  transition: all 0.4s ease-in-out;
}

.split-button span::before {
  top: 0;
  left: 0;
  transform: translateY(-150%);
}

.split-button span::after {
  bottom: 0;
  left: 0;
  transform: translateY(150%);
}

.split-button:hover span::before {
  transform: translateY(0);
}

.split-button:hover span::after {
  transform: translateY(0);
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  
<button class="neon-glow-button">Ripple</button>

body {
  font-family: Arial, sans-serif;
  background: #111;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.neon-glow-button {
  padding: 1rem 2.5rem;
  font-size: 1.4rem;
  color: #fff;
  background-color: transparent;
  border: 2px solid #00ff7b;
  border-radius: 1rem;
  cursor: pointer;
  position: relative;
  text-transform: uppercase;
  transition: all 0.3s ease;
}


.neon-glow-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #00ff7b;
  border-radius: 1rem;
  color: black;
  z-index: -1;
  transform: scale(0);
  transition: all 0.4s ease;
}

.neon-glow-button:hover {
  color: #000000;
  font-weight: bold;
  box-shadow: 0 0 10px #00ff66, 0 0 30px #1fec85, 0 0 60px #00ff91;
}

.neon-glow-button:hover::before {
  transform: scale(1.1);
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  
<button class="hover-slice-button">Slice</button>

body {
  font-family: Arial, sans-serif;
  background: #101010;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.hover-slice-button {
  padding: 1rem 2.5rem;
  font-size: 1.4rem;
  color: #fff;
  background: transparent;
  border: 2px solid #00ffff;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
  font-weight: bold;
}

.hover-slice-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #00ffff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
  z-index: -1;
}

.hover-slice-button:hover::before {
  transform: scaleX(1);
}

.hover-slice-button:hover {
  color: #101010;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  
<button class="diagonal-button">Click Me</button>

body {
  font-family: "Arial", sans-serif;
  background: linear-gradient(135deg, #121212, #1e1e1e);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  overflow: hidden;
}

.diagonal-button {
  position: relative;
  padding: 1rem 2.5rem;
  font-size: 1.5rem;
  font-weight: bold;
  color: #fff;
  background: transparent;
  border: none;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  z-index: 1;
}

/* Layered Diagonal Slice Effect */
.diagonal-button::before,
.diagonal-button::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #00ffff, #0066ff);
  transform: skewX(-45deg) translateX(-100%);
  z-index: -2;
  transition: transform 0.5s ease;
}

.diagonal-button::after {
  background: linear-gradient(135deg, #ff77ff, #ff0066);
  z-index: -1;
  transform: skewX(-45deg) translateX(100%);
}

/* Text Shadow and Hover State */
.diagonal-button:hover {
  color: #fff;
  text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.8);
}

.diagonal-button:hover::before {
  transform: skewX(-45deg) translateX(0);
}

.diagonal-button:hover::after {
  transform: skewX(-45deg) translateX(0);
}

/* Button Animation Glow */
.diagonal-button::before,
.diagonal-button::after {
  box-shadow: 0 10px 20px rgba(0, 255, 255, 0.3);
}

/* Add a Subtle 3D Look on Hover */
.diagonal-button:hover {
  transform: scale(1.05);
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  
<button class="neon-button">Click Me</button>

body {
  font-family: Arial, sans-serif;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #111;
}

/* Neon Button Styling */
.neon-button {
  position: relative;
  padding: 15px 30px;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  background-color: transparent;
  border: 2px solid #fff;
  border-radius: 50px;
  cursor: pointer;
  outline: none;
  transition: all 0.4s ease-in-out;
  box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff;
}

/* Neon Button Animation */
.neon-button:before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, #ff00ff, #00ffff, #ff00ff, #00ffff);
  background-size: 400%;
  border-radius: 50px;
  z-index: -1;
  animation: neon-glow 3s linear infinite;
}

/* Glowing Effect on Hover */
.neon-button:hover {
  color: #00ffff;
  box-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 30px #00ffff;
  transform: scale(1.05) rotate(10deg); /* Slightly increase size on hover */
}

.neon-button:active {
  transform: scale(0.58);
}

/* Animation for the Moving Borders */
@keyframes neon-glow {
  0% {
      background-position: 400% 0;
  }
  50% {
      background-position: 0 100%;
  }
  100% {
      background-position: 400% 0;
  }
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  
<button>
  <div class="icon-wrapper">
    <!-- Front of the Icon -->
    <div class="icon-card front">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path fill="none" d="M0 0h24v24H0z" />
        <path d="M12 2L2 7l10 5 10-5-10-5zm0 8.618L4.236 7 12 3.382 19.764 7 12 10.618zM2 13l10 5 10-5v4.236L12 22l-10-5v-4.236zm10 3.618L4.236 14 12 10.382 19.764 14 12 16.618z" />
      </svg>
    </div>
    <!-- Back of the Icon -->
    <div class="icon-card back">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path fill="none" d="M0 0h24v24H0z" />
        <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zm-1-10V8h2v4h-2zm0 2h2v2h-2v-2z" />
      </svg>
    </div>
  </div>
  <span>Flip Me</span>
</button>

body {
  font-family: 'Poppins', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: radial-gradient(circle, #ffefba, #ffffff);
  margin: 0;
  overflow: hidden;
}

button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1em 2em;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #6a11cb, #2575fc);
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
  color: white;
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.4s ease;
}

button:hover {
  transform: translateY(-7px);
  background: linear-gradient(135deg, #f093fb, #f5576c);
  color: white;
  box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.3);
}

button:active {
  transform: translateY(0);
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
}

button span {
  z-index: 2;
  position: relative;
}

button .icon-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-right: 0.8em;
  perspective: 1000px;
}

button .icon-card {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ffffff, #f5f7fa);
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  backface-visibility: hidden;
  transform-origin: center;
  transition: transform 0.6s ease;
}

button .icon-card.front {
  transform: rotateY(0);
}

button .icon-card.back {
  transform: rotateY(180deg);
  background: linear-gradient(135deg, #f093fb, #f5576c);
}

button:hover .icon-card.front {
  transform: rotateY(-180deg);
}

button:hover .icon-card.back {
  transform: rotateY(0);
}

button svg {
  width: 24px;
  height: 24px;
  transition: fill 0.3s ease-in-out;
}

button .icon-card.front svg {
  fill: #2575fc;
}

button .icon-card.back svg {
  fill: white;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
<button id="particle-button">
  <div class="icon">
    <!-- Font Awesome Spinner -->
    <i class="fas fa-spinner waiting-icon"></i>
    <!-- Font Awesome Checkmark -->
    <i class="fas fa-check tick-icon"></i>
  </div>
  <span>Click Me</span>
</button>

body {
  font-family: 'Poppins', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: radial-gradient(circle, #0f0f0f 70%, #070707);
  margin: 0;
  overflow: hidden;
}

button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1em 2.5em;
  border: none;
  border-radius: 12px;
  background: rgba(20, 20, 20, 0.9);
  backdrop-filter: blur(10px);
  color: white;
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.4s ease;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.5), 0 0 30px rgba(0, 255, 255, 0.3);
  border: 2px solid rgba(0, 255, 255, 0.5);
}

button:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 25px rgba(0, 255, 255, 0.8), 0 0 50px rgba(0, 255, 255, 0.5);
  border: 2px solid rgba(0, 255, 255, 0.8);
}

button:active {
  transform: translateY(0);
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.5), 0 0 30px rgba(0, 255, 255, 0.3);
}

button span {
  z-index: 2;
  position: relative;
  margin-left: 10px;
}

button .icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

button .waiting-icon {
  animation: spin 1s linear infinite;
  opacity: 1;
}

button .tick-icon {
  opacity: 0;
  position: absolute; /* Replace icon in the same position */
}

button.clicked .waiting-icon {
  opacity: 0;
  transform: scale(0.5);
}

button.clicked .tick-icon {
  opacity: 1;
  transform: scale(1.2); /* Slight pop effect */
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Particle Effect */
.particle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: rgba(0, 255, 255, 0.8);
  border-radius: 50%;
  animation: particles 0.8s ease-out forwards;
  opacity: 0;
}

@keyframes particles {
  0% {
    transform: scale(0.8) translate(0, 0);
    opacity: 1;
  }
  100% {
    transform: scale(1) translate(calc(var(--x) * 150px), calc(var(--y) * 150px));
    opacity: 0;
  }
}

function initializeButton() {
const button = document.getElementById('particle-button');

button.addEventListener('click', () => {
  // Add the clicked class
  button.classList.add('clicked');

  // Create particles
  for (let i = 0; i < 10; i++) {
    const particle = document.createElement('div');
    particle.className = 'particle';
    particle.style.setProperty('--x', Math.random() * 2 - 1); // Random x direction
    particle.style.setProperty('--y', Math.random() * 2 - 1); // Random y direction
    button.appendChild(particle);

    // Remove particle after animation
    particle.addEventListener('animationend', () => {
      particle.remove();
    });
  }
});
}

// Call the function to initialize the toggle
initializeButton();

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<button class="ripple-button">Ripple</button>

body {
  font-family: Arial, sans-serif;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.ripple-button {
  padding: 1rem 3rem;
  font-size: 1.5rem;
  color: #fff;
  background: transparent;
  border: 2px solid #00ffff;
  border-radius: 0.5rem;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
  font-weight: bold;
}

.ripple-button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgb(4, 248, 240);
  border-radius: 10%;
  transform: translate(-50%, -50%);
  transition: width 01s ease, height 01s ease, opacity 01s ease;
  z-index: -1;
}

.ripple-button:hover::before {
  width: 300%;
  height: 300%;
  opacity: 0;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<button>
  <a href="#"><span>Click Me</span></a>
</button>

body{
  display: flex;
  justify-content: center;
  align-items: center;
  background: black;
}

a {
position: relative;
display: inline-block;
padding: 16px 32px;
border: 3px solid #ffffff;
text-transform: uppercase;
color: #ffffff;
text-decoration: none;
font-weight: bold;
font-size: 22px;
letter-spacing: 1px;
background-color: #333333;
border-radius: 8px;
transition: all 0.3s ease;
}

a::before {
content: '';
position: absolute;
top: -4px;
left: -4px;
width: calc(100% + 8px);
height: calc(100% + 8px);
background-color: #ff5722;
transition: all 0.3s ease;
border-radius: 12px;
}

a:hover::before {
transform: scale(1.1);
}

a::after {
content: '';
position: absolute;
left: -2px;
top: -2px;
height: calc(100% + 4px);
width: calc(100% + 4px);
background-color: #ff5722;
transition: all 0.5s ease;
border-radius: 12px;
z-index: -1;
}

a:hover::after {
transform: scale(0);
}

a span {
position: relative;
z-index: 2;
}

button {
background-color: none;
border: none;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<button>
  <a href="#"><span>Click Me</span></a>
</button>

body{
    display: flex;
    justify-content: center;
    align-items: center;
    background: black;
  }

a {
  position: relative;
  display: inline-block;
  padding: 16px 32px;
  border: 3px solid #ffffff;
  text-transform: uppercase;
  color: #ffffff;
  text-decoration: none;
  font-weight: bold;
  font-size: 22px;
  letter-spacing: 1px;
  background-color: #333333;
  border-radius: 8px;
  transition: all 0.3s ease;
}

a:hover {
  background: #00ffee;
  color: black;
}

a:active{
  background: #ba0000;
  color: white;
}

a::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  background: linear-gradient(135deg, #ff5722, #00ffee, #8b0000);
  transition: all 0.3s ease;
  border-radius: 2px;
  z-index: -1;
}

a:hover::before {
  transform: scale(1.1);
}

a::after {
  content: '';
  position: absolute;
  left: -2px;
  top: -2px;
  height: calc(100% + 4px);
  width: calc(100% + 4px);
  background-color: #ff5722;
  transition: all 0.5s ease;
  border-radius: 12px;
  z-index: -1;
}

a:hover::after {
  transform: scale(0);
}

a span {
  position: relative;
  z-index: 2;
}

button {
  background-color: none;
  border: none;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<button class="unique-button">
  <span>Explore</span>
</button>

body{
    display: flex;
    justify-content: center;
    align-items: center;
    background: black;
  }

/* Unique Button Design - One File */
.unique-button {
  position: relative;
  display: inline-block;
  padding: 18px 36px;
  background-color: #222;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  border: 3px solid white;
  border-radius: 50px;
  cursor: pointer;
  outline: none;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  transition: all 0.4s ease;
}

.unique-button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300%;
  height: 300%;
  background: linear-gradient(45deg, #00ffb3, #cc6600);
  transition: all 02s ease;
  border-radius: 50%;
  transform: translate(-0%, -50%) scale(0);
}

.unique-button:hover::before {
  transform: translate(-50%, -50%) scale(1);
}

.unique-button:hover {
  color: #fff;
  box-shadow: 0 8px 40px rgba(0, 255, 149, 0.4);
}

.unique-button span {
  position: relative;
  z-index: 2;
  transition: color 0.4s ease;
}

.unique-button:hover span {
  color: #222;
}


.unique-button:active{
  transform: translateY(4px) rotate(10deg);
  box-shadow: 0 8px 40px rgba(0, 255, 149, 0.8);
  border: 6px solid rgba(255, 255, 255, 0.9);
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<button>
  <a href="#"><span>Hover Me!</span></a> 
  </button>

body{
    display: flex;
    justify-content: center;
    align-items: center;
    background: black;
  }


a {
  position: relative;
  display: inline-block;
  padding: 15px 30px;
  border: 2px solid #fefefe;
  text-transform: uppercase;
  color: #fefefe;
  text-decoration: none;
  font-weight: 600;
  font-size: 20px;
  transition: background-color 0.3s ease, color 0.3s ease, text-decoration 0.3s ease;
}

a:hover {
  background-color: #fefefe;
  color: black;
  text-decoration: underline;
  box-shadow: 0 5px 5px rgb(150, 150, 155);
}
a:active{
  transform: translateY(3px);
}

a::before {
  content: '';
  position: absolute;
  top: 6px;
  left: -2px;
  width: calc(100% + 4px);
  height: calc(100% - 12px);
  background-color: #000000;
  transition: 0.3s ease-in-out;
  transform: scaleY(1);
}

a:hover::before {
  transform: scaleY(0);
}

a::after {
  content: '';
  position: absolute;
  left: 6px;
  top: -2px;
  height: calc(100% + 4px);
  width: calc(100% - 12px);
  background-color: #000000;
  transition: 0.3s ease-in-out;
  transform: scaleX(1);
  transition-delay: 0.5s;
}

a:hover::after {
  transform: scaleX(0);
}

a span {
  position: relative;
  z-index: 3;
}

button {
  background-color: none;
  text-decoration: none;
  background-color: #000000;
  border: none;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<button>
  <a href="#"><span>Hello!</span></a> 
</button>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(45deg, #000000, #111418);
  margin: 0;
}

a {
  position: relative;
  display: inline-block;
  padding: 20px 40px;
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  color: #000000;
  text-decoration: none;
  border-radius: 10px;
  background-image: linear-gradient(45deg, #00ffaa, #42a9f7);
  background-clip: padding-box;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

a:hover {
  color: #ffffff;
  background: linear-gradient(45deg, #000000, #111418);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  transform: scale(1.1);
}

a:active {
  transform: translateY(4px);
}

a::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: 0.3s ease;
  transform-origin: center;
  transform: scale(0);
  border: 2px solid rgb(0, 255, 136);
}

a:hover::before {
  transform: scale(1);
}

a span {
  position: relative;
  z-index: 3;
}

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
}

button:focus {
  outline: none;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<button>
  <a href="#"><span>Hover Me!</span></a> 
</button>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #1c1c1c;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  overflow: hidden;
  transition: all 0.5s ease;
}

h1 {
  font-size: 36px;
  color: #ffffff;
  text-align: center;
}

/* Button Container */
button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  position: relative;
  padding: 0;
}

/* Anchor (Link) Button Styles */
a {
  position: relative;
  display: inline-block;
  padding: 20px 40px;
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fefefe;
  text-decoration: none;
  border-radius: 2px;
  background-image: linear-gradient(45deg, #5A6A75, #1F2833);
  background-clip: padding-box;
  transition: all 0.4s ease;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

a span {
  position: relative;
  z-index: 2;
}

a:hover {
  background-image: linear-gradient(45deg, #000000, #e5e5e5);
  color: #1F2833;
  transform: scale(1.05);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
  animation: hoverAnimation 0.6s ease forwards;
}

a:active {
  transform: translateY(3px);
}

/* Pseudo-elements for Extra Effects */
a::before,
a::after {
  content: '';
  position: absolute;
  transition: all 0.3s ease;
  z-index: 1;
}

/* Hover Effect with Glowing Border */
a::before {
  top: 10px;
  left: 10px;
  width: 100%;
  height: 100%;
  border: 2px solid #00d2d2;
  transform: scale(0);
  transform-origin: center;
}

a::after {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid #00d2d2;
  opacity: 0;
  transform: scale(0.9);
}

a:hover::before {
  transform: scale(1);
}

a:hover::after {
  opacity: 1;
  transform: scale(1);
}



/* Subtle Animation for Button Text on Hover */
a:hover span {
  color: #ffffff;
  animation: textGlow 1s ease-in-out infinite alternate;
}

/* Glow Effect for Text */
@keyframes textGlow {
  0% {
    text-shadow: 0 0 5px #00d2d2, 0 0 10px #00d2d2, 0 0 15px #00d2d2;
  }
  100% {
    text-shadow: 0 0 10px #00d2d2, 0 0 20px #00d2d2, 0 0 25px #00d2d2;
  }
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<button>
  <a href="#"><span>Explore</span></a> 
</button>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #121212;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  overflow: hidden;
}

h1 {
  font-size: 36px;
  color: #ffffff;
  text-align: center;
}

/* Button Container */
button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  position: relative;
}

/* Anchor (Link) Button Styles */
a {
  position: relative;
  display: inline-block;
  padding: 20px 40px;
  font-size: 24px;
  font-weight: 600;
  text-transform: uppercase;
  color: #ffffff;
  text-decoration: none;
  border-radius: 2px;
  background: transparent;
  border: 2px solid #ffffff;
  transition: all 0.4s ease;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

a span {
  position: relative;
  z-index: 2;
  transition: color 0.4s ease;
}

/* Hover Effect: Glowing Border & Color Change */
a:hover {
  background-color: #000000;
  color: #121212;
  box-shadow: 0 8px 25px rgba(0, 255, 255, 0.5);
  transform: translateY(-5px);
}

a:active {
  transform: translateY(3px);
}

/* Pseudo-elements for Dynamic Border Glow */
a::before,
a::after {
  content: '';
  position: absolute;
  transition: all 0.4s ease;
  z-index: 1;
}

/* Left and Right Borders Animation */
a::before {
  top: 0;
  left: -2px;
  width: 5px;
  height: 100%;
  background-color: #00ffff;
  transform: scaleY(0);
  transform-origin: top;
}

a::after {
  top: -2px;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: #00ffff;
  transform: scaleX(0);
  transform-origin: left;
}

/* Hover Effect on Borders */
a:hover::before {
  transform: scaleY(1);
}

a:hover::after {
  transform: scaleX(1);
}

/* Glowing Text Effect */
a:hover span {
  color: #ffffff;
  animation: textGlow 1.5s ease-in-out infinite alternate;
}

/* Keyframe for Text Glow */
@keyframes textGlow {
  0% {
    text-shadow: 0 0 5px #00ffff, 0 0 10px #00ffff, 0 0 15px #00ffff;
  }
  100% {
    text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 25px #00ffff;
  }
}

/* Focus Feedback with Glow */
a:focus {
  outline: none;
  box-shadow: 0 0 15px #00ffff, 0 0 30px #00ffff;
}

button:focus {
  outline: none;
}

button:focus a {
  outline: none;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<button>
  <a href="#"><span>Discover</span></a> 
</button>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: radial-gradient(circle, #000000, #0f0f0f, #121212);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  overflow: hidden;
}

/* Button Container */
button {
  background-color: transparent;
  border: 5px ridge rgb(0, 255, 110);
  cursor: pointer;
  outline: none;
  padding: 0;
  position: relative;
}

/* Anchor (Link) Button Styles */
a {
  position: relative;
  display: inline-block;
  padding: 20px 50px;
  font-size: 24px;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  color: #ffffff;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(0, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  transition: all 0.4s ease;
  overflow: hidden;
}

a span {
  position: relative;
  z-index: 2;
}

/* Hover Effects */
a:hover {
  background: linear-gradient(135deg, #00ffff, #ff00ff, #000000, #000000, #000000);
  color: #000000;
  border: 1px solid #ffffff;
  box-shadow: 0 8px 40px rgba(0, 255, 255, 0.5), 0 0 20px rgba(255, 0, 255, 0.4);
  transform: translateY(-5px);
}

/* Pseudo-elements for Holographic Animation */
a::before,
a::after {
  content: '';
  position: absolute;
  z-index: 1;
  transition: all 0.5s ease;
  border-radius: 50%;
}

/* Glow Animation (Top Left) */
a::before {
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(0, 255, 255, 0.4), transparent);
  transform: scale(0);
  opacity: 0;
}

a:hover::before {
  transform: scale(1);
  opacity: 1;
}

/* Glow Animation (Bottom Right) */
a::after {
  bottom: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 0, 255, 0.4), transparent);
  transform: scale(0);
  opacity: 0;
}

a:hover::after {
  transform: scale(1);
  opacity: 1;
}

/* Active State */
a:active {
  transform: translateY(2px);
  box-shadow: 0 4px 20px rgba(0, 255, 255, 0.3), 0 0 10px rgba(255, 0, 255, 0.2);
}

/* Glow Animation on Text */
a:hover span {
  animation: neonGlow 1s ease-in-out infinite alternate;
}

/* Neon Glow Keyframes */
@keyframes neonGlow {
  0% {
    text-shadow: 0 0 5px #00ffff, 0 0 10px #ff00ff, 0 0 20px #00ffff;
  }
  100% {
    text-shadow: 0 0 10px #ff00ff, 0 0 20px #00ffff, 0 0 30px #ff00ff;
  }
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<button>
  <a href="#"><span>Engage</span></a>
</button>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: radial-gradient(circle, #0a0a0a, #111, #000);
  font-family: 'Arial', sans-serif;
  overflow: hidden;
}

/* Button Container */
button {
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 0;
  position: relative;
}

/* Anchor Styles */
a {
  position: relative;
  display: inline-block;
  padding: 15px 50px;
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg, #1e1e1e, #333333);
  border-radius: 30px;
  overflow: hidden;
  z-index: 1;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

a span {
  position: relative;
  z-index: 2;
  animation: glowText 2s infinite alternate;
}

/* Glow Effect Text */
@keyframes glowText {
  0% {
    text-shadow: 0 0 5px #00ffcc, 0 0 10px #00ffcc;
  }
  100% {
    text-shadow: 0 0 10px #00ffcc, 0 0 20px #00ffcc;
  }
}

/* Energy Trails */
a::before,
a::after {
  content: '';
  position: absolute;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(0, 255, 255, 0.4), transparent);
  z-index: 0;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  animation: energyPulse 1.5s infinite alternate;
}

a::before {
  top: -100%;
  left: -100%;
  border-radius: 50%;
}

a::after {
  bottom: -100%;
  right: -100%;
  border-radius: 50%;
}

/* Pulse Animation */
@keyframes energyPulse {
  0% {
    transform: scale(0.5);
    opacity: 0.4;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}

/* Hover Effects */
a:hover {
  background: radial-gradient(circle, rgba(0, 255, 255, 0.7), transparent);
  border: 2px solid #00ffcc;
  color: #fff;
  transform: scale(1.1);
  box-shadow: 0 8px 20px rgba(0, 255, 204, 0.5), 0 0 15px rgba(0, 102, 255, 0.4);
}

a:hover::before,
a:hover::after {
  transform: scale(1.5);
  opacity: 1;
}

a:active {
  transform: translateY(3px);
  box-shadow: 0 4px 10px rgba(0, 255, 204, 0.3);
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  
<button class="aurora-glow-button">Aurora Glow</button>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background: radial-gradient(circle at center, #1e1e2f, #111);
  font-family: 'Arial', sans-serif;
}

.aurora-glow-button {
  padding: 14px 28px;
  font-size: 1.1rem;
  color: #fff;
  background: linear-gradient(135deg, #4e54c8, #8f94fb);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(78, 84, 200, 0.4), 0 2px 10px rgba(143, 148, 251, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.aurora-glow-button:hover {
  background: linear-gradient(135deg, #ff6a95, #ffc371);
  box-shadow: 0 8px 30px rgba(255, 106, 149, 0.5), 0 3px 15px rgba(255, 195, 113, 0.4);
  transform: scale(1.05);
}

.aurora-glow-button:active {
  transform: scale(1);
  box-shadow: 0 4px 12px rgba(255, 106, 149, 0.4), 0 2px 8px rgba(255, 195, 113, 0.3);
  background: linear-gradient(135deg, #fc6076, #ff9a44);
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<button>
  <a href="#"><span>Power On</span></a>
</button>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(145deg, #1c1c1c, #232323);
  font-family: 'Arial', sans-serif;
}

/* Button Container */
button {
  background: none;
  border: none;
  outline: none;
  padding: 0;
  cursor: pointer;
  position: relative;
}

/* Anchor Styles */
a {
  display: inline-block;
  padding: 20px 60px;
  font-size: 24px;
  font-weight: bold;
  text-transform: uppercase;
  color: #ffffff;
  text-decoration: none;
  background: #202020;
  border-radius: 50px;
  box-shadow: 10px 10px 30px #171717, -10px -10px 30px #2b2b2b;
  transition: all 0.3s ease-in-out;
  position: relative;
  overflow: hidden;
}

/* Button Text */
a span {
  position: relative;
  z-index: 2;
  color: #ff008c;
  text-shadow: 0 0 8px rgba(0, 255, 204, 0.5);
}

/* Hover Effects */
a:hover {
  border: 3px dotted #ff008c;
  box-shadow: inset 5px 5px 15px #171717, inset -5px -5px 15px #2b2b2b;
  transform: translateY(-2px);
}

a:hover span {
  animation: glow 1s infinite alternate;
}

/* Glow Effect */
@keyframes glow {
  0% {
    text-shadow: 0 0 8px rgba(0, 255, 204, 0.5), 0 0 15px rgba(0, 255, 204, 0.4);
  }
  100% {
    text-shadow: 0 0 15px rgba(0, 255, 204, 0.7), 0 0 30px rgba(0, 255, 204, 0.6);
  }
}

/* Neon Glow Ring */
a::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300%;
  height: 300%;
  
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  z-index: 1;
  transition: transform 0.4s ease-in-out;
}

a:hover::before {
  transform: translate(-50%, -50%) scale(1.2);
}

/* Active State */
a:active {
  box-shadow: inset 3px 3px 10px #171717, inset -3px -3px 10px #2b2b2b;
  transform: translateY(2px);
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<button class="premium-button">Click Me</button>

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

.premium-button {
  background: linear-gradient(135deg, #1d976c, #93f9b9);
  border: none;
  border-radius: 50px;
  color: white;
  padding: 15px 40px;
  font-size: 18px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
}

.premium-button:hover {
  box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px);
  opacity: 0.9;
  border-radius: 1px;
}

.premium-button:active {
  transform: translateY(2px);
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<button class="unique-button"><span>Press Me</span></button>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #1c1c1c;
  margin: 0;
}

.unique-button {
  background: #ff416c;
  background: linear-gradient(315deg, #ff4b2b, #ff416c);
  border: none;
  border-radius: 10px;
  color: rgb(147, 144, 144);
  padding: 20px 50px;
  font-size: 20px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
  box-shadow: 0px 20px 30px rgba(255, 65, 108, 0.4);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: all 0.3s ease;
}

.unique-button::before {
  content: "";
  position: absolute;
  top: -20%;
  left: -20%;
  width: 140%;
  height: 140%;
  background: radial-gradient(circle at center, #ffffff, rgba(255, 255, 255, 0.1));
  transition: transform 0.3s ease;
  z-index: -1;
}

.unique-button::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background: rgba(255, 65, 108, 0.2);
  box-shadow: 0px 0px 20px rgba(255, 65, 108, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}

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

.unique-button:hover::after {
  opacity: 1;
}

.unique-button:hover {
  box-shadow: 0px 25px 35px rgba(255, 65, 108, 0.6);
  transform: translateY(-5px);
}

.unique-button:active {
  transform: translateY(3px);
}

.unique-button span {
  position: relative;
  z-index: 2;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<button class="futuristic-button">Activate</button>

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

.futuristic-button {
  position: relative;
  background: #1f1f1f;
  border: 2px solid #00ff99;
  border-radius: 12px;
  color: #00ff99;
  padding: 15px 45px;
  font-size: 18px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 3px;
  overflow: hidden;
  transition: all 0.4s ease;
  cursor: pointer;
}

.futuristic-button::before,
.futuristic-button::after {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  background: radial-gradient(circle, rgba(0, 255, 153, 0.6), rgba(0, 255, 153, 0));
  z-index: -1;
  transition: transform 0.4s ease;
}

.futuristic-button::after {
  background: radial-gradient(circle, rgba(0, 255, 153, 0.8), rgba(0, 255, 153, 0.2));
  transform: scale(0);
}

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

.futuristic-button:hover::after {
  transform: scale(1);
}

.futuristic-button:hover {
  color: rgb(0, 0, 0);
  background: #00ff99;
  box-shadow: 0 0 20px rgba(0, 255, 153, 0.6);
}

.futuristic-button:active {
  transform: translateY(3px);
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
<button class="fa-button"><i class="fa fa-magic fa-icon"></i>Magic Button</button>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #282c34;
  margin: 0;
  font-family: Arial, sans-serif;
}

.fa-button {
  display: inline-flex;
  align-items: center;
  background: #61dafb;
  border: none;
  border-radius: 50px;
  padding: 15px 30px;
  font-size: 20px;
  color: #282c34;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.4s ease;
  overflow: hidden;
  position: relative;
}

.fa-button .fa-icon {
  display: inline-block;
  margin-right: 10px;
  font-size: 24px;
  transition: transform 0.4s ease;
}

.fa-button:hover {
  background: #21a1f1;
  color: #ffffff;
}

.fa-button:hover .fa-icon {
  transform: rotate(360deg);
}

.fa-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 300%;
  height: 300%;
  background: radial-gradient(circle, rgba(97, 218, 251, 0.2), rgba(33, 161, 241, 0));
  z-index: -1;
  transition: all 0.6s ease;
}

.fa-button:hover::before {
  width: 100%;
  height: 100%;
}

.fa-button:active {
  transform: translateY(2px);
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<button>
  <a href="#"><span>Hover Me</span></a>
</button>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(145deg, #0d0d0d, #161616);
  font-family: 'Arial', sans-serif;
  overflow: hidden;
}

/* Button Container */
button {
  background: none;
  border: none;
  outline: none;
  padding: 0;
  cursor: pointer;
  position: relative;
}

/* Anchor Button Styles */
a {
  position: relative;
  display: inline-block;
  padding: 20px 30px;
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 50px;
  background: linear-gradient(135deg, #1a1a1a, #222222);
  overflow: hidden;
  z-index: 1;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Button Text */
a span {
  position: relative;
  z-index: 2;
  color: #00d1ff;
  text-shadow: 0 0 8px rgba(0, 209, 255, 0.6);
  transition: color 0.3s ease-in-out;
}

/* Hover Effects */
a:hover {
  background: linear-gradient(135deg, #00d1ff, #0066ff);
  color: #ffffff;
  box-shadow: 0 15px 40px rgba(0, 209, 255, 0.6), 0 0 20px rgba(0, 102, 255, 0.5);
  border-color: rgba(0, 209, 255, 0.5);
}

a:hover span {
  color: #ffffff;
}

/* Ripple Animation */
a::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, rgba(0, 209, 255, 0.4), transparent);
  transform: translate(-50%, -50%);
  opacity: 0;
  z-index: 1;
  border-radius: 50%;
  animation: ripple 1.5s infinite;
}

@keyframes ripple {
  0% {
    width: 0;
    height: 0;
    opacity: 0.5;
  }
  100% {
    width: 400%;
    height: 400%;
    opacity: 0;
  }
}

/* Hover Ripple Boost */
a:hover::before {
  animation-duration: 1s;
  opacity: 0.7;
}

/* Active State */
a:active {
  transform: translateY(2px);
  box-shadow: 0 8px 25px rgba(0, 209, 255, 0.4);
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<button>
  <a href="#"><span>Enter</span></a>
</button>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
  font-family: 'Arial', sans-serif;
  overflow: hidden;
}

/* Button Container */
button {
  background: none;
  border: none;
  outline: none;
  padding: 0;
  cursor: pointer;
  position: relative;
}

/* Anchor Button Styles */
a {
  position: relative;
  display: inline-block;
  padding: 20px 70px;
  font-size: 24px;
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: none;
  color: #ffffff;
  background: linear-gradient(145deg, #101010, #1a1a1a);
  border-radius: 50px;
  box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.6), -10px -10px 30px rgba(60, 60, 60, 0.2);
  overflow: hidden;
  z-index: 1;
  transition: all 0.3s ease-in-out;
}

/* Button Text */
a span {
  position: relative;
  z-index: 2;
  color: #00ffe5;
  text-shadow: 0 0 8px rgba(0, 255, 229, 0.7);
  transition: all 0.4s ease-in-out;
}

/* Hover Effects */
a:hover {
  background: linear-gradient(145deg, #203a43, #1a2027);
  box-shadow: 0 10px 30px rgba(0, 255, 229, 0.3), 0 0 20px rgba(0, 255, 229, 0.5);
  transform: scale(1.05);
}

a:hover span {
  color: #ffffff;
  text-shadow: 0 0 20px rgba(0, 255, 229, 0.9), 0 0 30px rgba(0, 255, 229, 0.6);
}

/* Infinity Loop Animation */
a::before,
a::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150%;
  height: 150%;
  background: conic-gradient(from 0deg, rgba(0, 255, 229, 0.3), transparent);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  z-index: 1;
  animation: infinitySpin 6s linear infinite;
  opacity: 0.7;
}

a::before {
  animation-duration: 6s;
}

a::after {
  animation-duration: 8s;
  opacity: 0.4;
}

/* Hover Boost */
a:hover::before,
a:hover::after {
  animation-duration: 3s;
}

/* Active State */
a:active {
  transform: translateY(3px);
  box-shadow: inset 10px 10px 20px rgba(0, 0, 0, 0.6), inset -10px -10px 20px rgba(60, 60, 60, 0.2);
}

/* Infinity Spin Animation */
@keyframes infinitySpin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<button>
  <span>Hover Me</span>
</button>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: radial-gradient(circle at center, #101820, #070d12);
  font-family: 'Arial', sans-serif;
  overflow: hidden;
}

button {
  position: relative;
  padding: 0.1em 0.25em;
  width: 14em;
  height: 4.5em;
  background: linear-gradient(135deg, #1c1c1c, #292929);
  border: 0.1em solid #00d4ff;
  border-radius: 0.5em;
  font-size: 14px;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease-in-out;
}

button:hover {
  box-shadow: 0 10px 20px rgba(0, 212, 255, 0.5), 0 0 10px rgba(0, 212, 255, 0.8);
  transform: scale(1.05);
  border-color: #00f0ff;
}

/* Button Text Span */
button span {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: 0.4em;
  width: 9em;
  height: 3em;
  background: linear-gradient(145deg, #1c1c1c, #2b2b2b);
  border-radius: 0.4em;
  font-size: 1.5em;
  color: #ffffff;
  border: 0.1em solid #00d4ff;
  box-shadow: 0 4px 10px rgba(0, 212, 255, 0.7);
  transition: all 0.5s ease-in-out;
}

button span:hover {
  transform: translate(0, 0.5em);
  box-shadow: 0 0 0 0 rgba(0, 212, 255, 0.7);
  background: linear-gradient(145deg, #292929, #1c1c1c);
}

button span:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(0, 212, 255, 0.3), transparent);
  border-radius: 0.4em;
  transition: opacity 0.4s ease-in-out;
  opacity: 0;
  z-index: -1;
}

button span:hover:after {
  opacity: 1;
}

/* Button Animation for Non-Hover State */
button span:not(:hover) {
  transition: all 0.5s ease;
}

/* Glow Effect for Hover */
button:hover span {
  border-color: #00f0ff;
  text-shadow: 0 0 5px rgba(0, 255, 255, 0.8), 0 0 15px rgba(0, 255, 255, 0.6);
}

button:active{
  transform: scale(0.5);
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<button>
  <a href="#"><span>Click Me</span></a>
</button>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(135deg, #0a0f19, #131b28);
  font-family: 'Arial', sans-serif;
  overflow: hidden;
}

/* Button Styles */
button {
  position: relative;
  padding: 0.2em;
  width: 15em;
  height: 5em;
  background: linear-gradient(135deg, #00d4ff, #ff00ff, #00ffaa);
  border: none;
  border-radius: 0.1em;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4), 0 0 15px rgba(0, 212, 255, 0.5);
  transition: all 0.3s ease-in-out;
}

button:hover {
  transform: scale(1.05);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5), 0 0 25px rgba(0, 255, 255, 0.8);
}


a{
  color: #ffffff;
  text-decoration: none; 
}


/* Inner Span (Text) */
button span {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.9));
  border-radius: 0.1em;
  color: #ffffff;
  font-size: 1.5em;
  font-weight: bold;
  text-transform: uppercase;
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.5);
  z-index: 1;
  transition: all 0.3s ease-in-out, transform 0.2s ease-in-out;
}

button span:hover {
  transform: translateY(-0.1em);
  color: #00ffaa;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.9), 0 0 20px rgba(255, 0, 255, 0.8);
}

/* Holographic Glow Effect */
button::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(0, 212, 255, 0.3), transparent 50%);
  filter: blur(30px);
  opacity: 0;
  z-index: 0;
  transition: opacity 0.5s ease-in-out;
}

button:hover::before {
  opacity: 1;
}

/* Animated Pulse Effect */
button::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300%;
  height: 300%;
  background: radial-gradient(circle, rgba(0, 212, 255, 0.2), transparent 70%);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  animation: pulse 1.5s infinite ease-in-out;
  z-index: 0;
}

@keyframes pulse {
  0% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0.5;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0.1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.6);
    opacity: 0;
  }
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<button>
  <span>Press Me</span>
</button>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background: linear-gradient(135deg, #141e30, #243b55);
  font-family: 'Arial', sans-serif;
  overflow: hidden;
}

/* Button Container */
button {
  position: relative;
  display: inline-block;
  padding: 0.3em;
  width: 14em;
  height: 4.5em;
  border: none;
  border-radius: 2em;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3), 0 0 20px rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  cursor: pointer;
  overflow: hidden;
  transition: all 0.4s ease-in-out;
}

button:hover {
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.4), 0 0 30px rgba(255, 255, 255, 0.4);
  transform: scale(1.05);
}

/* Inner Span */
button span {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: 1.5em;
  font-weight: bold;
  border-radius: 1.8em;
  text-transform: uppercase;
  z-index: 1;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}

button span:hover {
  background: rgba(255, 255, 255, 0.3);
  color: #00d4ff;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.8), 0 0 20px rgba(255, 255, 255, 0.6);
}

button:active{
  transform: translateY(0.2em) rotate(45deg) scale(1.5);
}

/* Shimmer Effect */
button span::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
  transform: rotate(45deg);
  z-index: -1;
  animation: shimmer 2s infinite linear;
}

@keyframes shimmer {
  0% {
    transform: rotate(45deg) translateX(-100%);
  }
  100% {
    transform: rotate(45deg) translateX(100%);
  }
}

/* Glow Effect on Hover */
button::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.2), transparent);
  border-radius: 2em;
  z-index: 0;
  transition: opacity 0.4s ease-in-out;
  opacity: 0;
}

button:hover::after {
  opacity: 1;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<button>
  <span>Hover Me</span>
</button>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: radial-gradient(circle, #1b1b2f, #162447, #1f4068);
  margin: 0;
  overflow: hidden;
  font-family: 'Arial', sans-serif;
}

/* Button Base */
button {
  position: relative;
  width: 12em;
  height: 4em;
  background: none;
  border: none;
  outline: none;
  perspective: 1000px;
  cursor: pointer;
}

button:hover {
  transform: scale(1.1);
  transition: transform 0.3s ease-in-out;
}

/* Span with 3D Flip Effect */
button span {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #ff7eb3, #ff758f);
  border-radius: 8px;
  font-size: 1.3em;
  font-weight: bold;
  color: #fff;
  text-transform: uppercase;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.6s ease-in-out, background 0.4s ease;
  transform-origin: center;
  overflow: hidden;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
}

/* Color Changing Effect */
button span::before,
button span::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 8px;
  background: linear-gradient(135deg, #1fa2ff, #12d8fa, #a6ffcb);
  transition: transform 0.6s ease-in-out;
  transform-origin: center;
  z-index: -1;
}

button span::before {
  transform: scaleX(0);
}

button span::after {
  transform: scaleY(0);
}

/* Hover Reveal Animation */
button span:hover {
  transform: rotateY(180deg);
}

button span:hover::before {
  transform: scaleX(1);
}

button span:hover::after {
  transform: scaleY(1);
}

/* Glow Effect */
button span:hover {
  box-shadow: 0 0 20px rgba(31, 162, 255, 0.5), 0 0 30px rgba(31, 162, 255, 0.7);
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<button class="btn btn-gradient">Diagonal Swipe</button>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: radial-gradient(circle, #000000, #0b0c0e, #101111);
  margin: 0;
  overflow: hidden;
  font-family: 'Arial', sans-serif;
}

.btn-gradient {
  color: rgb(0, 255, 225);
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid rgb(43, 241, 135);
  padding: 10px 20px;
  font-size: 17px;
  cursor: pointer;
  font-weight: bold;
  background: transparent;
  position: relative;
  transition: all 1s;
  overflow: hidden;
}

.btn-gradient:hover {
  color: white;
}

.btn-gradient:active{
  transform: translateY(-10px);
  box-shadow: 0px 0px 5px rgba(0, 255, 225, 0.5);
}

.btn-gradient::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 0%;
  top: 0;
  left: -40px;
  transform: skewX(45deg);
  background: linear-gradient(45deg, rgb(121, 212, 153), rgb(231, 38, 70));
  z-index: -1;
  transition: all 1s;
}

.btn-gradient:hover::before {
  width: 160%;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  
<button class="neon-ripple-button">Ripple</button>

body {
  font-family: Arial, sans-serif;
  background: #111;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}

.neon-ripple-button {
  padding: 1rem 3rem;
  font-size: 1.2rem;
  color: #fff;
  text-transform: uppercase;
  border: none;
  background-color: #222;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 0 0.5rem #00ffff, inset 0 0 1rem #00ffff;
  transition: all 0.3s ease;
}

.neon-ripple-button::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, #00ffff 0%, rgba(0, 0, 0, 0) 80%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
  opacity: 0.6;
}

.neon-ripple-button:hover::after {
  width: 20rem;
  height: 20rem;
}

.neon-ripple-button:hover {
  color: #00ffff;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<button class="btn-split">Middle Swipe </button>

body{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f1f1f1;
}
.btn-split {
  color: purple;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid purple;
  padding: 10px 20px;
  font-size: 17px;
  cursor: pointer;
  font-weight: bold;
  background: transparent;
  position: relative;
  transition: all 0.5s ease-in-out;
  overflow: hidden;
}

.btn-split:hover {
  color: white;
}

.btn-split::before,
.btn-split::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 50%;
  background: purple;
  z-index: -1;
  transition: all 0.6s ease-in-out;
}

.btn-split::before {
  top: 0;
  left: -100%;
  transform: skewX(-45deg);
}

.btn-split::after {
  bottom: 0;
  right: -100%;
  transform: skewX(45deg);
}

.btn-split:hover::before {
  left: 0;
}

.btn-split:hover::after {
  right: 0;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <button class="darkmode-btn">Dark Mode Depth</button>

 body {
    background: #e3e1e1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.darkmode-btn {
    background: #222;
    color: #fff;
    padding: 12px 24px;
    font-size: 18px;
    border: none;
    cursor: pointer;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.6),
                0 10px 20px rgba(50, 50, 50, 0.4),
                inset 0 0 10px rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease-in-out;
}

.darkmode-btn:hover {
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.8),
                0 12px 25px rgba(50, 50, 50, 0.5),
                inset 0 0 15px rgba(255, 255, 255, 0.2);
    transform: translateY(-3px);
}
</style>

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <button class="frosted-btn">Frosted Glass</button>

 body {
    background: #1a1111;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.frosted-btn {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 12px 24px;
    font-size: 18px;
    border: none;
    cursor: pointer;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2),
                0 0 20px rgba(200, 200, 255, 0.3),
                0 0 30px rgba(180, 180, 255, 0.4);
    transition: all 0.3s ease-in-out;
}

.frosted-btn:hover {
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3),
                0 0 25px rgba(200, 200, 255, 0.4),
                0 0 35px rgba(180, 180, 255, 0.5);
    transform: scale(1.05);
}
</style>

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <button class="cyberpunk-btn">Cyberpunk Glow</button>

 body {
    background: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.cyberpunk-btn {
    background: #242323;
    color: #fff;
    padding: 12px 24px;
    font-size: 18px;
    border: none;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.6),
                0 0 20px rgba(255, 0, 255, 0.5),
                0 0 30px rgba(0, 255, 255, 0.4);
}

.cyberpunk-btn:hover {
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.8),
                0 0 25px rgba(255, 0, 255, 0.6),
                0 0 35px rgba(0, 255, 255, 0.5);
    transform: scale(1.05);
}
</style>

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <button class="darkmode-btn">Dark Depth</button>

 body {
    background: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.darkmode-btn {
    background: #039f7b;
    color: #fff;
    padding: 12px 24px;
    font-size: 18px;
    border: none;
    cursor: pointer;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.6),
                0 10px 20px rgba(50, 50, 50, 0.4),
                inset 0 0 10px rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease-in-out;
}

.darkmode-btn:hover {
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.8),
                0 12px 25px rgba(50, 50, 50, 0.5),
                inset 0 0 15px rgba(255, 255, 255, 0.2);
    transform: translateY(-13px) translateX(11px);
}
</style>

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <button class="neumorphic-button">PRESS ME</button>

 body {
    background: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.neumorphic-button {
    background-color: #e0e0e0;
    border-radius: 10px;
    border: none;
    box-shadow: 12px 12px 24px #a0a0a0, -12px -12px 24px #ffffff;
    width: 150px;
    height: 50px;
    font-size: 16px;
    cursor: pointer;
    transition: box-shadow 0.2s;
}

.neumorphic-button:active {
   box-shadow: 4px 4px 8px #a0a0a0, -4px -4px 8px #ffffff;
}
</style>

<!-- No JS code needed for this element -->

51 Buttons

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code