How should I go about animating my buttons on hover in HTML

October 15, 2022

I am working on an emulator type thing and I have a set browser feature that sets the browser type on the click of a button, but whenever I try to animate said button, it doesn’t work. The button itself works fine, but when I try to animate it, it does nothing
Here’s the code

.tabbuttons {
display: flex;
flex-wrap: wrap;
max-width: 800px;

}

.tabbutton {
border-radius: 30px;
font-size: 18px;
color: var(--light-text);
margin: 10px;
border: 1px solid #5f6368;
background: transparent;
padding: 14px 18px;
cursor: pointer;

}

  
  <div class="tabbuttons">
  
  <div class="tabbutton" id="google" class="button hvr-grow" onclick="setsearch('Google')" >Google</div>
  
  <div class="tabbutton" id="duckduckgo" onclick="setsearch('DuckDuckGo')">DuckDuckGo</div>
  
  <div class="tabbutton" id="bing" onclick="setsearch('Bing')">Bing</div>
  
  <div class="tabbutton" id="brave" onclick="setsearch('Brave')">Brave</div>



    
  </div>

How can I animate these without any complex scripts?

>Solution :

You have a few options for animating with css. Blow I’ve made a few simple ones using the :hover property, using @keyframes, and one using a combination of both.

If you have something more specific that your looking to achieve you should update your question with more specific expectations.

Also on your google button, you have class=""; defined twice in the html which isn’t best practice.

.tabbuttons {
  display: flex;
  flex-wrap: wrap;
  max-width: 800px;
}

.tabbutton {
  border-radius: 30px;
  font-size: 18px;
  color: var(--light-text);
  margin: 10px;
  border: 1px solid #5f6368;
  background: transparent;
  padding: 14px 18px;
  cursor: pointer;
}
#google:hover {
  transition: background-color 3.5s ease;
  background-color: red;
}
#duckduckgo {
  animation: buttonTransition 2.2s ease forwards;
}
#bing:hover {
  animation: buttonTransition 2.2s ease forwards;
}
@keyframes buttonTransition {
    0% {
        transform: rotateY(0deg) rotateX(10deg);
        animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1);
    }
    25% {
        transform: rotateY(20deg) rotateX(10deg);
    }
    50% {
        transform: rotateY(0deg) rotateX(10deg);
        animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1);
    }
    75% {
        transform: rotateY(-20deg) rotateX(10deg);
    }
    100% {
        transform: rotateY(0deg) rotateX(10deg);
    }
}

<div class="tabbuttons">
  
  <div class="tabbutton" id="google">Google</div>
  
  <div class="tabbutton" id="duckduckgo">DuckDuckGo</div>
  
  <div class="tabbutton" id="bing">Bing</div>

</div>