Use promo code s-welcome to save 30% for the first month of your maintenance.

Get Started
My Account Start a Project

Button Hover Effects – HTML & CSS Only

Button Hover Effects – HTML & CSS Only

Introduction

At S-Tier Dev, we prioritize simplicity, usability, and performance. Often, button hover effects and animations become unnecessarily complicated or require extensive JavaScript usage. We aim to avoid bloat and keep our codebase minimal and clean on every project, even for the smallest details and parts, such as button animation.

Each project is unique, so we avoid reusing the same resources, including buttons. Over the years, we have built a library of in-house-created assets and carefully selected ones from the internet, and we understand how challenging it can be to find the perfect button effect that is both lightweight and easy to implement.

To help you streamline your development process, we have decided to share a portion of our library. Below, you’ll find a selection of simple and efficient button effects using only HTML and CSS, with examples and easy-to-grab and implement code.

Global styles

		.hover-effect {
   font-size: 15px;
   padding: 20px 45px;
   text-transform: uppercase;
   text-decoration: none;
   letter-spacing: 2px;
}

Every button below has its own unique style that needs to be added for that specific effect to take place. Aside from the hover effects, the CSS above needs to be applied so the buttons can look exactly like the examples, but it is not essential to the effects themselves.

Hover Effects

					<a class="hover-effect hover-effect-1">Button</a>
				
					.hover-effect-1 {
	position: relative;
	transition: color 0.5s, transform 0.2s, 
    background-color 0.2s;
	border-radius: 3px;	
	background-color: transparent;
	color: #18191b;
	overflow: hidden;
}
.hover-effect-1::after,
.hover-effect-1::before {
	border-radius: 3px;
	box-sizing: border-box;
}
.hover-effect-1:active {
	transform: translateY(3px);
}
.hover-effect-1:hover {
	color: #e6e6e6;
}
.hover-effect-1::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 2px solid #18191b;
	transition: opacity 0.3s, border 0.3s;
}
.hover-effect-1:hover::before {
	opacity: 0;
}
.hover-effect-1::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 200px;
	height: 200px;
	background-color: #18191b;
	border-color: transparent;
	border-radius: 50%;
	transform: translate(-35px, -70px) scale(0.1);
	opacity: 0;
	z-index: -1;
	transition: transform 0.3s, opacity 0.3s, background-color 0.3s;
}
.hover-effect-1:hover::after {
	opacity: 1;
	transform-origin: 100px 100px;
	transform: scale(1) translate(-10px, -70px);
}
Button 
					<a class="hover-effect hover-effect-2">Button</a>
				
					.hover-effect-2 {
	position: relative;
	transition: color 0.5s, transform 0.2s, 
    background-color 0.2s;
	border-radius: 3px;	
}
.hover-effect-2:active {
	transform: translateY(3px);
}
.hover-effect-2::after,
.hover-effect-2::before {
	border-radius: 3px;
	box-sizing: border-box;
}

.hover-effect-2 {
	background-color: transparent;
	color: #adf7bd;
}
.hover-effect-2:hover {
	background-color: transparent;
	box-shadow: none;
	color: #fff;
}
.hover-effect-2::before {
content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 2px solid #adf7bd;
	transition: opacity 0.3s, border 0.3s;
}
.hover-effect-2:hover::before {
	opacity: 0;
}
.hover-effect-2::after {
content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: transparent;
	border: 2px solid #adf7bd;
	opacity: 0;
	z-index: -1;
	transform: scaleX(1.1) scaleY(1.3);
	transition: transform 0.3s, opacity 0.3s;
}
.hover-effect-2:hover::after {
	opacity: 1;
	transform: scaleX(1) scaleY(1);
	border-color: #fff;
}
Button 
					<a class="hover-effect hover-effect-3">Button</a> 
				
					.hover-effect-3 {
	position: relative;
	transition: all 280ms ease-in-out;
	color: #fff;
}
.hover-effect-3:hover,
.hover-effect-3:active {
	letter-spacing: 5px;
}
.hover-effect-3::before {
	top: 0;
}
.hover-effect-3::after {
	bottom: 0;
}
.hover-effect-3:after,
.hover-effect-3:before {
	backface-visibility: hidden;
	background-color: #fff;
	height: 2px;
	bottom: 0px;
	content: " ";
	display: block;
	margin: 0 auto;
	position: absolute;
	transition: all 280ms ease-in-out;
	width: 0;
	left: 0;
	right: 0;
}
.hover-effect-3:hover:after,
.hover-effect-3:hover:before {
	backface-visibility: hidden;
	border-color: #fff;
	transition: width 350ms ease-in-out;
	width: 70%;
}
Button 
					<a class="hover-effect hover-effect-4">Button</a> 
				
					.hover-effect-4 {
	border: 1px solid #fff;
	color: #fff;
	overflow: hidden;
	position: relative;
}

.hover-effect-4:after {
	background: #fff;
	content: "";
	height: 155px;
	left: -75px;
	opacity: 0.2;
	position: absolute;
	top: -50px;
	transform: rotate(35deg);
	transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
	width: 50px;
	z-index: -10;
}
.hover-effect-4:hover:after {
	left: 120%;
	transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
}
Button 
					 <a class="hover-effect hover-effect-5">Button</a> 
				
					.hover-effect-5 {
	border: 1px solid transparent;
	box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);
	outline: 1px solid;
	outline-color: rgba(255, 255, 255, .5);
	outline-offset: 0px;
	text-shadow: none;
	transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
}

.hover-effect-5:hover {
	border: 1px solid;
	box-shadow: inset 0 0 20px rgba(255, 255, 255, .5), 0 0 20px rgba(255, 255, 255, .2);
	outline-color: rgba(255, 255, 255, 0);
	outline-offset: 15px;
	text-shadow: .5px .5px 1px #fff;
}
Button 
					<a class="hover-effect hover-effect-6">Button</a>
				
					.hover-effect-6 {
	border-radius: 100px;
	color: #fff;
	transition: all 0.3s;
	position: relative;
	overflow: hidden;
}
.hover-effect-6:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #487852;
	border-radius: 10rem;
	z-index: -2;
}
.hover-effect-6:before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0%;
	height: 100%;
	background-color: #2b4831;
	transition: all 0.3s;
	border-radius: 10rem;
	z-index: -1;
}
.hover-effect-6:hover {
	color: #fff;
}
.hover-effect-6:hover:before {
	width: 100%;
}
Button 
					<a class="hover-effect hover-effect-7">Button</a>
				
					.hover-effect-7 {
            background: #adf7bd;
            color: #000;
            display: flex;
            gap: 10px;
            justify-content: center;
            position: relative;
            transition: color 0.3s;
            z-index: 2;
}

.hover-effect-7:before {
            content: '';
            top: 2px;
            left: 2px;
            width: 10px;
            height: 10px;
            background: #000;
            z-index: -1;
            position: absolute;
            transition: width 0.3s, height 0.3s;
}

.hover-effect-7:after {
            content: '';
            -webkit-mask: url('data:image/svg+xml; utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="20" height="20" viewBox="0 0 24 24"><polygon fill-rule="evenodd" points="19 6.414 5.707 19.707 4.293 18.293 17.586 5 10 5 10 3 21 3 21 14 19 14"/></svg>');
            background: #000;
            -webkit-mask-position: center;
            -webkit-mask-repeat: no-repeat;
            right: 23px;
            width: 14px;
            height: 14px;
            display: inline-block;
            transition: background 0.3s;
}

.hover-effect-7:hover {
         color: #adf7bd;
}

.hover-effect-7:hover:before {
            width: calc(100% - 4px);
            height: calc(100% - 4px);
}

.hover-effect-7:hover:after {
     background: #adf7bd;
}
Button 
					<a class="hover-effect hover-effect-8">
Button
 <small></small>
</a>
				
					.hover-effect-8 {
            border: 1px solid #000;
            border-radius: 30px;
            color: #000;
            background: #fff;
            display: flex;
            gap: 10px;
            justify-content: center;
            position: relative;
            z-index: 2;
}

.hover-effect-8 small {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            top: 0;
            position: absolute;
            right: -30px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #000;
}

.hover-effect-8 small::after {
            content: '';
            -webkit-mask: url('data:image/svg+xml; utf8,	<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 20 20" fill="none"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.343 15.657L15.657 4.343m0 0v9.9m0-9.9h-9.9"/></svg>');
            background: #fff;
            -webkit-mask-position: center;
            -webkit-mask-repeat: no-repeat;
            right: 23px;
            width: 14px;
            height: 14px;
            display: block;
            transition: transform 0.3s;
}

.hover-effect-8:hover small::after {
     transform: rotate(45deg);
}
Button 
					<a class="hover-effect hover-effect-10">Button</a>
				
					.hover-effect-10 {
            color: #adf7bd;
            border: 1px solid #adf7bd;
            text-align: center;
            overflow: hidden;
            position: relative;
            transition: color 0.4s;
} 

.hover-effect-10::before {
            content: '';
            position: absolute;
            z-index: -1;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 0%;
            background: #adf7bd;
            transition: height 0.8s;
            border-radius: 50% 50% 0 0;
}

.hover-effect-10:hover {
            color: #000;
}

.hover-effect-10:hover::before {
            height: 180%;
}
Button 
					<a class="hover-effect hover-effect-11">Button</a>
				
					.hover-effect-11 {
            color: #000;
            border: 1px solid #adf7bd;
            text-align: center;
            overflow: hidden;
            position: relative;
            transition: color 0.4s;
} 

.hover-effect-11::before {
            content: '';
            position: absolute;
            z-index: -1;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 180%;
            background: #adf7bd;
            transition: height 0.8s;
            border-radius: 50% 50% 0 0;
}

.hover-effect-11:hover {
           color: #adf7bd;
}

.hover-effect-11:hover::before {
            height: 0%;
}
Button 
					<a class="hover-effect hover-effect-12">Button</a>
				
					.hover-effect-12 {
            color: #000;
            background: #adf7bd;
            text-align: center;
            overflow: hidden;
            position: relative;
            transition: color 0.4s;
} 

.hover-effect-12:before {
            content: '';
            display: block;
            top: 0;
            bottom: 0;
            position: absolute;
            width: 40px;
            left: -60px;
            transform: skewX(-20deg);
            opacity: 0.5;
            background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.56) 50%, rgba(255, 255, 255, 0) 100%);
}

.hover-effect-12:hover:before {
            left: 110%;
            transition: 800ms ease all;
            left: 0.2;
}
Button 
					<a class="hover-effect hover-effect-13">
           <span></span>
         <span></span>
         <span></span>
         <span></span>
Button
</a>
				
					.hover-effect-13 {
            position: relative;
            color: #ffffff;
            background: #000;
            overflow: hidden;
            box-shadow: 0 20px 50px rgb(255 255 255 / 5%);
} 

.hover-effect-13 span:nth-child(1)  {
            position: absolute;
            width: 100%;
            height: 5px;
            top: 0;
            left: 0;
}

 @keyframes animate1 {
            0% {
               transform: translateX(-100%);
            }
            100% {
               transform: translateX(100%);
            }
    }

.hover-effect-13:hover span:nth-child(1) {
            background: linear-gradient(to right, #55a967, #adf7bd);
            animation: animate1 2s linear infinite;
 }

.hover-effect-13 span:nth-child(2) {
            position: absolute;
            width: 5px;
            height: 100%;
            top: 0;
            right: 0;
            animation-delay: 1s;
}

 @keyframes animate2 {
            0% {
               transform: translateY(-100%);
            }
            100% {
               transform: translateY(100%);
            }
}

.hover-effect-13:hover span:nth-child(2) {
            background: linear-gradient(to bottom, #55a967, #adf7bd);
            animation: animate2 2s linear infinite;
 }

.hover-effect-13 span:nth-child(3) {
            position: absolute;
            width: 100%;
            height: 5px;
            left: 0;
            bottom: 0;
}

 @keyframes animate3 {
            0% {
               transform: translateX(100%);
            }
            100% {
               transform: translateX(-100%);
            }
 }

.hover-effect-13:hover span:nth-child(3) {
            background: linear-gradient(to left, #55a967, #adf7bd);
            animation: animate3 2s linear infinite;
 }

.hover-effect-13 span:nth-child(4) {
            position: absolute;
            width: 5px;
            height: 100%;
            top: 0;
            left: 0;
            animation-delay: 1s;
}

 @keyframes animate4 {
            0% {
               transform: translateY(100%);
            }
            100% {
               transform: translateY(-100%);
            }
 }

.hover-effect-13:hover span:nth-child(4) {
            background: linear-gradient(to top, #55a967, #adf7bd);
            animation: animate4 2s linear infinite;
 }
Button 
					<a class="hover-effect hover-effect-14">
        <span>Button</span>
       <i></i>
</a>
				
					.hover-effect-14 {
            position: relative;
            color: #000000;
            background: #adf7bd;
            overflow: hidden;
            transition: all 0.3s;
            letter-spacing: 1px; 
}
.hover-effect-14:hover {
            letter-spacing: 1.5px;
            background: #adf7bd;
            box-shadow: 0 0 35px #adf7bd;
}

.hover-effect-14::before {
            content: '';
            position: absolute;
            inset: 2px;
            background: #ffffff;
}

.hover-effect-14 span {
            position: relative;
            z-index: 1;
}

.hover-effect-14 i {
            position: absolute;
            inset: 0;
            display: block;
}

.hover-effect-14 i:before {
            content: '';
            position: absolute;
            top: 0;
            left: 80%;
            width: 10px;
            height: 4px;
            background: #ffffff;
            transform: translateX(-50%) skew(325deg);
            transition: all 0.5s;
}

.hover-effect-14:hover i:before {
            width: 20px;
            left: 20%;
}

.hover-effect-14 i:after{
            content: '';
            position: absolute;
            bottom: 0;
            left: 20%;
            width: 10px;
            height: 4px;
            background: #ffffff;
            transform: translateX(-50%) skew(325deg);
            transition: all 0.5s;
}

.hover-effect-14:hover i:after{
            width: 20px;
            left: 80%;
}
Button 
					<a class="hover-effect hover-effect-15">Button</a>
				
					.hover-effect-15 {
            position: relative;
            color: #adf7bd;
            border: 2px solid #adf7bd;
            background: #adf7bd;
            overflow: hidden;
            transition: background-color 0.4s ease, color 0.4s ease;
            background: transparent;
            z-index: 1;
} 

.hover-effect-15:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 160%;
            transform: translateX(53%) skew(-40deg);
            background: #adf7bd;
            z-index: -1;
            transition: transform 0.5s;
}

.hover-effect-15:hover {
       background: transparent;
       color: #000;
}

.hover-effect-15:hover::before {
            transform: translateX(-30px) skew(-40deg);
}
Button 
					<a class="hover-effect hover-effect-16">Button</a>
				
					.hover-effect-16 {
             position: relative;
            color: #000000;
            border: 2px solid #000000;
            transition: color 0.4s linear;
            overflow: hidden;
} 

.hover-effect-16:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            background: #000;
            z-index: -1;
            transition: transform 0.5s;
            transition-timing-function: cubic-bezier(0.5, 1.6, 0.4, 0.7);
            transform: scaleY(0);
            transform-origin: 0 0;
}

.hover-effect-16:hover {
       color: #fff;
}

.hover-effect-16:hover::before {
       transform: scaleY(1);
}
Button 
					<a class="hover-effect hover-effect-17">Button</a>
				
					.hover-effect-17 {
            position: relative;
            color: #000000;
            border: 2px solid #000000;
            background: none;
            overflow: hidden;
            transition: color 0.4s linear;
} 

.hover-effect-17:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            background: #000000;
            z-index: -1;
            transition: transform 0.5s;
            transition-timing-function: cubic-bezier(0.5, 1.6, 0.4, 0.7);
            transform: scaleX(0);
            transform-origin: 0 0;
}

.hover-effect-17:hover {
       color: #fff;
}

.hover-effect-17:hover:before {
      transform: scaleX(1);
}
Button 
					<a class="hover-effect hover-effect-18">Button</a>
				
					.hover-effect-18 {
            position: relative;
            z-index: 1;
            color: #000000;
            background: #adf7bd;
            overflow: hidden;
            transition: color 0.6s linear;
} 

.hover-effect-18:before {
            content: '';
            position: absolute;
            height: 50%;
            width: 0;
            transition: 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86);
            z-index: -1;
            top: 0;
            left: 0;
            right: auto;
            background: #000;
}

.hover-effect-18:after{
            content: '';
            position: absolute;
            height: 50%;
            width: 0;
            transition: 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86);
            z-index: -1;
            bottom: 0;
            right: 0;
            left: auto;
            background: #000;
}

.hover-effect-18:hover {
      color: #adf7bd;
}

.hover-effect-18:hover:before {
             width: 100%;
            right: 0;
            left: auto;
}

.hover-effect-18:hover:after{
            width: 100%;
            left: 0;
            right: auto;
}
Button 
					<a class="hover-effect hover-effect-19">Button</a>
				
					.hover-effect-19 {
            position: relative;
            z-index: 2;
            color: #000000;
            background: #adf7bd;
            overflow: hidden;
            transition: all 0.3s 0s ease-out;
            transform: perspective(0) translateZ(0);
} 

.hover-effect-19:before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            height: 0;
            width: 120%;
            background: #000000;
            z-index: -1;
            transition: all 0.5s;
            transform: translate(-50%, -50%) rotate(-45deg);
}

.hover-effect-19:hover {
         color: #adf7bd;
}

.hover-effect-19:hover:before {
      height: 480%;
}
Button

Conclusion

We hope these examples inspire and enhance your next project, and check this post again since we will be filling it with more fun, simple and elegant effects.

Looking to improve existing or build a new website?

Let's work together