Create a “Hover Button Animation Effect” in CSS

Here is a CSS code snippet that you can use to create a hover effect on a button with a round shape and a fill that animates from left to right on hover:

.btn {
  display: inline-block;
  background: transparent;
  border: 2px solid #000000;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}

.btn:before {
  content: "";
  background: #000000;
  position: absolute;
  left: -100%;
  top: 0;
  bottom: 0;
  width: 100%;
  transition: all 0.3s ease-in-out;
}

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

To use this code, you will need to add a class attribute to your button element with a value of “btn” and then apply the above CSS styles to your webpage.

Here is an example of how you can use this code:

<button class="btn">Hover me</button>