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

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 >
  
  <div  id="google"  onclick="setsearch('Google')" >Google</div>
  
  <div  id="duckduckgo" onclick="setsearch('DuckDuckGo')">DuckDuckGo</div>
  
  <div  id="bing" onclick="setsearch('Bing')">Bing</div>
  
  <div  id="brave" onclick="setsearch('Brave')">Brave</div>



    
  </div>

How can I animate these without any complex scripts?

CodePudding user response：

The easiest way of animating is using the transition property in CSS.
Here's how it's done:

    button {
      padding: 1em;
      background: white;
      font-size: 2em;
      border-radius: 1em;
      cursor: pointer;
      transition: .18s all;
    }
    
    button:hover {
      background: red;
      color: white;
      transform: scale(1.2);
    }

<button>Click me</button>

CodePudding user response：

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 ; 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 >
  
  <div  id="google">Google</div>
  
  <div  id="duckduckgo">DuckDuckGo</div>
  
  <div  id="bing">Bing</div>

</div>