CSS Button Animation

Please Share On:

Definition:

You can animate your button using CSS property and give more stylish and elegant looks. Here are the list of CSS Button Animation property:

Hover
Click
Fade In and
Ripple

See each CSS Button animation with an example. Make sure you try yourself to understand clearly.

1. Hover

Definition:

When a user put cursor over a button, the button effect should change so that the user can see it clearly and knows that the cursor is over a button.

You can change button’s background color, size and text on hover effects.

Syntax:

.button:hover 
  {
  background-color: darkred;
  color:white;
  font-size: 20px;
  }

Source Code:

<!DOCTYPE html>
<html>
	<head>
		<style>
                   
		.button {
          background-color: green;
          color:white;
		  padding: 20px 20px;
		  text-align: center;
		  text-decoration: none;
          margin-right:15px;
		}
          
         .button:hover {
          background-color: darkred;
          color:white;
          font-size: 20px;
		}
        
		</style>
	</head>
	
	<body>
	<h2>CSS Button Hover</h2>
      
    <button class="button btn1">btn 1</button>
    <button class="button btn2">btn 2</button>
    <button class="button btn3">btn 3</button>

	</body>
</html>

Output:

try it yourself

2. Click

Definition:

Here, you can show a clickable effect while click on the button. See an example below of CSS button clickable effect.

Syntax:

.button:active {
   background-color: black;
   box-shadow: 0 4px #777;
   transform: translateY(8px);
   }

Source Code:

<!DOCTYPE html>
<html>
	<head>
		<style>
                   
		.button {
          background-color: green;
          color:white;
		  padding: 20px 20px;
		  text-align: center;
		  text-decoration: none;
          margin-right:15px;
		}
          
        .button:hover {
          background-color: darkred;
          color:white;
          font-size: 20px;
		}
          
        .button:active {
           background-color: black;
           box-shadow: 0 4px #777;
           transform: translateY(8px);
        }
        
		</style>
	</head>
	
	<body>
	<h2>CSS Button Hover</h2>
      
    <button class="button btn1">btn 1</button>
    <button class="button btn2">btn 2</button>
    <button class="button btn3">btn 3</button>

	</body>
</html>

Output:

try it yourself

3. Fade In

Definition:

Fade In effect depends on the opacity of the button. To change the button fade-in effect, use the opacity from 0.0(low opacity) to 1 (high opacity).

See an example below of the button, which has 0.6 opacity initially and changed into a high opacity on mouse hover to that button.

Syntax:

.button:hover {
    opacity: 1;
    }

Source Code:

<!DOCTYPE html>
<html>
	<head>
		<style>
                   
		.button {
          background-color: green;
          color:white;
		  padding: 20px 20px;
		  text-align: center;
		  text-decoration: none;
          margin-right:15px;
          opacity: 0.6;
		}
          
        .button:hover {
          background-color: darkred;
          color:white;
          opacity: 1;
		}
        
		</style>
	</head>
	
	<body>
	<h2>CSS Button Fade In</h2>
      
    <button class="button btn1">btn 1</button>
    <button class="button btn2">btn 2</button>
    <button class="button btn3">btn 3</button>

	</body>
</html>

Output

try it yourself

4. Ripple

Definition:

You can also display a button that shows the ripple effect when clicked on it. To display a ripple effect on the button, use .button:active:after { } property.

Syntax:

.button:active {
      background-color: #ffffff;
      background-size: 100%;
      transition: background 0s;
          }

Source Code:

<!DOCTYPE html>
<html>
	<head>
		<style>
                   
		.button {
          background-color: green;
          color: white;
		  padding: 20px 20px;
		  text-align: center;
		  text-decoration: none;
          margin-right:15px;
          background-position: center;
          opacity: 0.6;
  		  transition: background 0.8s;
		}
          
         .button:hover {
          	opacity: 1;
          	background: green radial-gradient(circle, transparent 1%, green 1%) center/25000%;
          }
          
         .button:active{
           	background-color: #ffffff;
  			background-size: 100%;
            transition: background 0s;
          }
          
		</style>
	</head>
	
	<body>
	<h2>CSS Button Ripple</h2>
      
    <button class="button btn1">btn 1</button>
    <button class="button btn2">btn 2</button>
    <button class="button btn3">btn 3</button>

	</body>
</html>

Output:

It is not possible to show the ripple output effect on the screenshot, so please click on “TRY IT YOURSELF” to see the ripple output.

try it yourself

Donate to support writers.

You may be interested in the following topics:

Post Views: 443

CSS Button Animation

Definition:

1. Hover

Definition:

Syntax:

Source Code:

Output:

2. Click

Definition:

Syntax:

Source Code:

Output:

3. Fade In

Definition:

Syntax:

Source Code:

Output

4. Ripple

Definition:

Syntax:

Source Code:

Output:

Leave a Reply Cancel reply

Copyright @2023. All Right Reserved.