CSS Button Hover Effects Implementation

Animated Fill Button

This effect creates a button with a background that expands from left to right on hover.


<html>
<head>
<style>
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.animated-btn {
  background: transparent;
  border: none;
  border-radius: 0;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 20px;
  padding: 15px 50px;
  position: relative;
}

.animated-btn::before {
  transition: all 0.8s cubic-bezier(0.7, -0.5, 0.2, 2);
  content: '';
  width: 1%;
  height: 100%;
  background: #ff5964;
  position: absolute;
  top: 0;
  left: 0;
}

.animated-btn span {
  mix-blend-mode: darken;
}

.animated-btn:hover::before {
  background: #ff5964;
  width: 100%;
}
</style>
</head>
<body>
<div class="container">
  <button class="animated-btn"><span>Hover Effect</span></button>
</div>
</body>
</html>

Neon Glow Buttons

These buttons feature neon colors with glowing shadow effects on hover.


<html>
<head>
<style>
.neon-container {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 100vh;
  background: #031628;
}

.neon-button {
  border: 1px solid;
  background-color: transparent;
  text-transform: uppercase;
  font-size: 14px;
  padding: 10px 20px;
  font-weight: 300;
}

.blue-neon {
  color: #4cc9f0;
}

.pink-neon {
  color: #f038ff;
}

.green-neon {
  color: #b9e769;
}

.neon-button:hover {
  color: white;
  border: 0;
}

.blue-neon:hover {
  background-color: #4cc9f0;
  box-shadow: 10px 10px 99px 6px rgba(76,201,240,1);
}

.pink-neon:hover {
  background-color: #f038ff;
  box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1);
}

.green-neon:hover {
  background-color: #b9e769;
  box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);
}
</style>
</head>
<body>
<div class="neon-container">
  <button class="neon-button blue-neon">Blue Glow</button>
  <button class="neon-button pink-neon">Pink Glow</button>
  <button class="neon-button green-neon">Green Glow</button>
</div>
</body>
</html>

Border Drawing Animation

This effect creates a border that draws itself around the button on hover.


<html>
<head>
<style>
.border-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.draw-border {
  border: 0;
  background: none;
  text-transform: uppercase;
  color: #4361ee;
  font-weight: bold;
  position: relative;
  outline: none;
  padding: 10px 20px;
  box-sizing: border-box;
}

.draw-border::before, .draw-border::after {
  box-sizing: inherit;
  position: absolute;
  content: '';
  border: 2px solid transparent;
  width: 0;
  height: 0;
}

.draw-border::after {
  bottom: 0;
  right: 0;
}

.draw-border::before {
  top: 0;
  left: 0;
}

.draw-border:hover::before, .draw-border:hover::after {
  width: 100%;
  height: 100%;
}

.draw-border:hover::before {
  border-top-color: #4361ee;
  border-right-color: #4361ee;
  transition: width 0.3s ease-out, height 0.3s ease-out 0.3s;
}

.draw-border:hover::after {
  border-bottom-color: #4361ee;
  border-left-color: #4361ee;
  transition: border-color 0s ease-out 0.6s, width 0.3s ease-out 0.6s, height 0.3s ease-out 1s;
}
</style>
</head>
<body>
<div class="border-container">
  <button class="draw-border">Animated Border</button>
</div>
</body>
</html>

Circular Icon Button

A button with circular design and gradient background transition.


<html>
<head>
<style>
.circle-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.btn-wrapper {
  position: relative;
}

.circle-button {
  border: 0;
  border-radius: 50px;
  color: white;
  background: #5f55af;
  padding: 15px 20px 16px 60px;
  text-transform: uppercase;
  background: linear-gradient(to right, #f72585 50%, #5f55af 50%);
  background-size: 200% 100%;
  background-position: right bottom;
  transition: all 2s ease;
}

.button-icon {
  background: #f72585;
  padding: 8px;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 0%;
}

.circle-button:hover {
   background-position: left bottom;
}
</style>
</head>
<body>
<div class="circle-container">
  <div class="btn-wrapper">
    <div class="button-icon"></div>
    <button class="circle-button">Circular Button</button>
  </div>
</div>
</body>
</html>

Dynamic Border Radius

This button changes its border radius dynaimcally on hover.


<html>
<head>
<style>
.radius-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.radius-button {
  border: 0;
  border-radius: 10px;
  background: #2ec4b6;
  text-transform: uppercase;
  color: white;
  font-size: 16px;
  font-weight: bold;
  padding: 15px 30px;
  outline: none;
  position: relative;
  transition: border-radius 1s;
}

.radius-button:hover {
   border-bottom-right-radius: 50px;
   border-top-left-radius: 50px;
   border-bottom-left-radius: 10px;
   border-top-right-radius: 10px;
}
</style>
</head>
<body>
<div class="radius-container">
  <button class="radius-button">Dynamic Border</button>
</div>
</body>
</html>

Frosted Glass Effect

Buttons with a frosted glass overlay effect on hover.


<html>
<head>
<style>
.frosted-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.frosted-button {
  border: 0;
  margin: 20px;
  text-transform: uppercase;
  font-size: 20px;
  font-weight: bold;
  padding: 15px 50px;
  border-radius: 50px;
  color: white;
  outline: none;
  position: relative;
}

.frosted-button::before{
  content: '';
  display: block;
  background: linear-gradient(to left, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.4) 50%);
  background-size: 210% 100%;
  background-position: right bottom;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  bottom:0;
  right:0;
  left: 0;
  border-radius: 50px;
  transition: all 1s;
}

.green-gradient {
   background-image: linear-gradient(to right, #25aae1, #40e495);
   box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);
}

.purple-gradient {
   background-image: linear-gradient(to right, #6253e1, #852D91);
   box-shadow: 0 4px 15px 0 rgba(236, 116, 149, 0.75);
}

.purple-gradient:hover::before {
  background-position: left bottom;
}

.green-gradient:hover::before {
  background-position: left bottom;
}
</style>
</head>
<body>
<div class="frosted-container">
  <button class="frosted-button green-gradient">Green Frost</button>
  <button class="frosted-button purple-gradient">Purple Frost</button>
</div>
</body>
</html>

Shiny Reflection

A button with a shiny reflection that moves across the surface on hover.


<html>
<head>
<style>
.shiny-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: #1c2541;
}

.shiny-button {
  border: 2px solid white;
  background: transparent;
  text-transform: uppercase;
  color: white;
  padding: 15px 50px;
  outline: none;
  overflow: hidden;
  position: relative;
}

.shiny-button span {
  z-index: 20;
}

.shiny-button::after {
  content: '';
    display: block;
    position: absolute;
    top: -36px;
    left: -100px;
    background: white;
    width: 50px;
    height: 125px;
    opacity: 20%;
    transform: rotate(-45deg);
}

.shiny-button:hover::after {
  left: 120%;
  transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1);
}
</style>
</head>
<body>
<div class="shiny-container">
  <button class="shiny-button"><span>Shiny Effect</span></button>
</div>
</body>
</html>

Tags: CSS-animation button-effects hover-transitions CSS-pseudo-elements gradient-backgrounds

Posted on Wed, 01 Jul 2026 18:09:36 +0000 by happyhappy

Freaks City