CSS Hoverable Buttons

Please Share On:

Definition:

You can display the hoverable buttons effect on mouseover buttons.

See an example below of CSS hoverable buttons.

Syntax:

.btn1:hover {background-color:lightblue; color: black;}
.btn2:hover {background-color:white; color: black;}
.btn3:hover {background-color:orange; color: black;}
.btn4:hover {background-color:white; color: black;}
.btn5:hover {background-color:blue; color: white;}

Source Code:

<!DOCTYPE html>
<html>
	<head>
		<style>
                   
		.button {
          background-color: black;
          color:white;
		  padding: 20px 20px;
		  text-align: center;
		  text-decoration: none;
          margin-bottom:2px;
		}
        .btn1 {background-color:blue; color: white;}
        .btn2 {background-color:black; color: white;}
        .btn3 {background-color:darkgrey; color: white;}
        .btn4 {background-color:green; color: white;}  
        .btn5 {background-color:red; color: white;}
          
        .btn1:hover {background-color:lightblue; color: black;}
        .btn2:hover {background-color:white; color: black;}
        .btn3:hover {background-color:orange; color: black;}
		.btn4:hover {background-color:white; color: black;}
        .btn5:hover {background-color:blue; color: white;}
          
		</style>
	</head>
	
	<body>
	<h2>CSS Hoverable Buttons</h2>
      
    <button class="button btn1">Blue</button>
    <button class="button btn2">Black</button>
    <button class="button btn3">Grey</button>
    <button class="button btn4">Green</button>
    <button class="button btn5">Red</button>

	</body>
</html>

Output:

try it yourself

Donate to support writers.

You may be interested in the following topics:

Post Views: 468

CSS Hoverable Buttons

Definition:

Syntax:

Source Code:

Output:

Leave a Reply Cancel reply

Copyright @2023. All Right Reserved.