Make smooth effect on hover for buttons, background, text... with CSS transitions

Make smooth effect on hover for buttons, background, text... with CSS transitions

In this topic, we will make hover effect smoothly for button like this:






Use transition property to make smooth effect for button, in this example, we will change color, background-color, border-color of button smoothly:

.green-btn {
  background-color: #09bf30;
  border: 2px solid #04a324;
  color: #fff;
  padding: 12px 30px;
  border-radius: 20px;
  text-align: center;
  text-transform: uppercase;
  font-size: 16px;
  transition: 0.3s; /* important thing here */
  cursor: pointer;
}

.green-btn:hover {
  background-color: #baf2c4;
  border: 2px solid #217c33;
  color: #217c33;
}


transition property allows you to change other properties smoothly (background-color, color, border-color, width, height)
View more about CSS transition property Here


© 2019 4codev

Created with love by Sil.