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

css button click animation

Add Answer

Bence Kocsi answered on August 6, 2021 Popularity 10/10 Helpfulness 4/10

answer css button click animation

related onclick css animation

related button animation css

related css animation click

related onclick css animation

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 button click css

Link to this answer
Share Copy Link

Contributed on Jun 23 2022

Bence Kocsi

0 Answers Avg Quality 2/10

Closely Related Answers

onclick css animation

Comment

 <style>
 
    a:active {
      background-color: yellow;
    }
    button:focus {
      background-color: yellow;
    }
    </style>

Popularity 10/10 Helpfulness 3/10 Language css

Source: Grepper

Tags: animation anim

Link to this answer
Share Copy Link

Contributed on Jul 05 2022

ahmad dalala

0 Answers Avg Quality 2/10

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

css animation click

Comment

hkjhkjhk

Popularity 1/10 Helpfulness 1/10 Language css

Source: Grepper

Tags: animation click css

Link to this answer
Share Copy Link

Contributed on Aug 06 2021

Ugly Unicorn

0 Answers Avg Quality 2/10

onclick css animation

Comment

gjdsiogj

Popularity 1/10 Helpfulness 1/10 Language csharp

Source: Grepper

Tags: animation c# css onclick

Link to this answer
Share Copy Link

Contributed on Oct 13 2022

lubneejtojsiab yang

0 Answers Avg Quality 2/10

css button click animation

Contents

More Related Answers

css button click animation

Closely Related Answers

onclick css animation

button animation css

css animation click

onclick css animation

Grepper

Documentation

Social

Legal

Contact

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