Breaking News: Grepper is joining You.com. Read the official announcement!

button animation css

Add Answer

YOU.com answered on May 6, 2022 Popularity 9/10 Helpfulness 2/10

answer button animation css

related css button click animation

related button animation

related play button animation css

button animation css

Comment

/* HTML */
<button class="animated-button">Click Me</button>

/* CSS */
@keyframes buttonHover {
  0% {
    background-color: #ffcc00;
    transform: scale(1);
  }
  50% {
    background-color: #ff9900;
    transform: scale(1.2);
  }
  100% {
    background-color: #ffcc00;
    transform: scale(1);
  }
}

.animated-button {
  background-color: #ffcc00;
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  animation: buttonHover 1s infinite; /* Apply animation on hover */
}

.animated-button:hover {
  animation: none; /* Disable animation on hover */
  background-color: #ff9900;
  transform: scale(1.2);
}

Popularity 9/10 Helpfulness 2/10 Language css

Source: Grepper

Link to this answer
Share Copy Link

Contributed on Sep 11 2023

YOU.com

0 Answers Avg Quality 2/10

Closely Related Answers

css button click animation

Comment

.button {
  position: relative;
  background-color: #04AA6D;
  border: none;
  font-size: 28px;
  color: #FFFFFF;
  padding: 20px;
  width: 200px;
  text-align: center;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
}

.button:after {
  content: "";
  background: #90EE90;
  display: block;
  position: absolute;
  padding-top: 300%;
  padding-left: 350%;
  margin-left: -20px!important;
  margin-top: -120%;
  opacity: 0;
  transition: all 0.8s
}

.button:active:after {
  padding: 0;
  margin: 0;
  opacity: 1;
  transition: 0s
}

Popularity 10/10 Helpfulness 4/10 Language css

Source: Grepper

Tags: animation anim

Link to this answer
Share Copy Link

Contributed on Jun 23 2022

Bence Kocsi

0 Answers Avg Quality 2/10

button animation

Comment

100 Modern CSS Buttons. Every style that you can imagine.
https://ui-buttons.web.app/

Popularity 10/10 Helpfulness 2/10 Language whatever

Source: Grepper

Tags: animation anim

Link to this answer
Share Copy Link

Contributed on Jul 15 2022

abdelghanyMh

0 Answers Avg Quality 2/10

play button animation css

Comment

-2

<head>
<style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
body{
  width:100vw;
  height:100vh;
  background:#efeeee;
  display:grid;
  place-items:center;
}
.container{
  display:grid;
  place-items:center;
  cursor:pointer;
  padding:4rem;
  background:#efeeee;
  border-radius:50%;
  transition:all 0.3s ease-in;
  box-shadow: 10px 10px 10px rgba(0,0,0,0.1),
    -10px -10px 10px rgba(255,255,255,0.6);
}
.container .fas{
  display:grid;
  place-items:center;
  font-size:4rem;
  color:gray;
}
.container:active{
  box-shadow: inset 10px 10px 10px rgba(0,0,0,0.1),
    inset -10px -10px 10px rgba(255,255,255,0.6);
}
.container:active .fas{
  color:#721efa;
}
</style>
</head>
<body>
  <div class="container">
    <i class="fas fa-play"></i>
  </div>  
</body>

Popularity 9/10 Helpfulness 1/10 Language css

Source: Grepper

Tags: animation anim

Link to this answer
Share Copy Link

Contributed on May 06 2022

SECRET MYSTERY

0 Answers Avg Quality 2/10

button animation css

Contents

More Related Answers

button animation css

Closely Related Answers

css button click animation

button animation

play button animation css

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.