Button Hover Effects CSS

Yet another simple and lightweight CSS button hover effects library. It comes with five different visual effects on button hover. The effects include neon, background fill, shadow, pulse, and gradient animation. You can easily implement the button style to any HTML element like div, span, link, or button by adding a class name. The button size and background color can be customized accordion to your needs.

How to Create Button Hover Effects CSS

First of all, create the HTML for the buttons structure as follows. We added “button” class to div element, you can add it to button or anchor element.

<div class="container">
  <h1>CSS buttons example</h1>
  <div class="button button-1">Neon</div>
  <div class="button button-2">Angle bg</div>
  <div class="button button-3">Shadow</div>
  <div class="button button-4">Pulse</div>
  <div class="button button-5">Gradient</div>
</div>

Finally, add the following CSS styles for hover effects. You can change the CSS rules in order to further customize the buttons.

 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');
body {
  font-family: 'poppins', sans-serif;
  height: 100%;
  background-color: black;
  color: #fff;
  text-transform: uppercase;
}
.container {
  text-align: center;
}
h1 {
  margin-left: 30px;
  margin-bottom: 50px;
color:black;
}
.button {
  width: 170px;
  padding-top: 30px;
  padding-bottom: 30px;
  text-align: center;
  color: #000;
  text-transform: uppercase;
  font-weight: 600;
  margin-left: 30px;
  margin-bottom: 30px;
  cursor: pointer;
  display: inline-block;
}

.button-1 {
  background-color: transparent;
  border: 3px solid #00d7c3;
  border-radius: 50px;
  -webkit-transition: all .15s ease-in-out;
  transition: all .15s ease-in-out;
  color: #00d7c3;
}
.button-1:hover {
  box-shadow: 0 0 10px 0 #00d7c3 inset, 0 0 20px 2px #00d7c3;
  border: 3px solid #00d7c3;
}

.button-2 {
  color: #fff;
  border: 3px solid #c266d3;
  background-image: -webkit-linear-gradient(30deg, #c266d3 50%, transparent 50%);
  background-image: linear-gradient(30deg, #c266d3 50%, transparent 50%);
  background-size: 500px;
  background-repeat: no-repeat;
  background-position: 0%;
  -webkit-transition: background 300ms ease-in-out;
  transition: background 300ms ease-in-out;
}
.button-2:hover {
  background-position: 100%;
  color: #c266d3;
}

.button-3 {
  border: 2px solid #3c73ff;
  background-color: #3c73ff;
  border-radius: 20px;
  color: #fff;
  transition: .3s;
}
.button-3:hover {
  box-shadow: 8px 8px #99bdff;
  transition: .3s;
}

.button-4 {
  background-color: transparent;
  border: 3px solid #ff0251;
  color: #ff0251;
  transition: .3s;
}
.button-4:hover {
  animation: pulse 1s infinite;
  transition: .3s;
}
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  70% {
    transform: scale(.9);
  }
    100% {
    transform: scale(1);
  }
}

.button-5 {
  width: 200px;
  border-radius: 5px;
  background-color: #F4F200;
  background-image: #F4F200;
  background-image: -moz-linear-gradient(top, #fff 0%, #F4F200 100%); 
  background-image: -webkit-linear-gradient(top, #fff 0%,#F4F200 100%); 
  background-image: linear-gradient(to bottom, #fff 0%,#F4F200 100%); 
  background-size: 300px;
  background-repeat: no-repeat;
  background-position: 0%;
  -webkit-transition: background 300ms ease-in-out;
  transition: background 300ms ease-in-out;
}
.button-5:hover {
  background-position: -200%;
  transition: background 300ms ease-in-out;
}
.cd__main{
background:background: #d9a7c7;
background: -webkit-linear-gradient(to right, #fffcdc, #d9a7c7);
background: linear-gradient(to right, #fffcdc, #d9a7c7)!important;  
display:block!important;

That’s all! hopefully, you have successfully integrated button hover effects into your project. If you have any questions or suggestions, feel free to comment below.