CSS Button Shadows

Please Share On:

Definition:

You can show button shadows to make your button more attractive.

See an example below of CSS button shadows.

Syntax:

.btn1 {box-shadow: 4px 4px 4px 4px red;}
.btn2 {box-shadow: 5px 5px 0 0 blue;}
.btn3 {box-shadow: -5px 5px 0 0 blue;}
.btn4 {box-shadow: -5px -5px 0 0 blue;}
.btn5 {box-shadow: 5px -5px 0 0 blue}
.btn6 {box-shadow: 5px 5px 2px rgba(0,0,0,0.5);}

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;
		}
        .btn1 {box-shadow: 4px 4px 4px 4px red;}
        .btn2 {box-shadow: 5px 5px 0 0 blue;}
        .btn3 {box-shadow: -5px 5px 0 0 blue;}
        .btn4 {box-shadow: -5px -5px 0 0 blue;}
        .btn5 {box-shadow: 5px -5px 0 0 blue}
        .btn6 {box-shadow: 5px 5px 2px rgba(0,0,0,0.5);}
          
		</style>
	</head>
	
	<body>
	<h2>CSS Button Shadows</h2>
      
    <button class="button btn1">btn 1</button>
    <button class="button btn2">btn 2</button>
    <button class="button btn3">btn 3</button>
    <button class="button btn4">btn 4</button>
    <button class="button btn5">btn 5</button>
    <button class="button btn6">btn 6</button>

	</body>
</html>

Output:

try it yourself

Donate to support writers.

You may be interested in the following topics:

Post Views: 434

Definition:

Syntax:

Source Code:

Output:

Leave a Reply Cancel reply

Copyright @2023. All Right Reserved.