BOX SHADOW PROPERTIES

box-shadow :

As its name implies, it is used to create the shadow of the button box. It is used to add the shadow to the button. We can also create a shadow during the hover on the button.
Syntax:

    box-shadow: [horizontal offset] [vertical offset] [blur radius] 
    [optional spread radius] [color];

Eg:

    < !DOCTYPE html>
    < html>
    < head>
        < title>button background Color< /title>   
        < style>
            body{
                text-align: center;
            }   
            button {
                color:black;
                font-size: 15px; 
            } 
            .b1{
            background-color: lightblue;
            border:5px blue  double;     
            border-radius: 10px;
            color:black;
            box-shadow : 0 8px 16px 0 black, 
                        0 6px 20px  0 rgba(0, 0, 0, 0.19); 
            }
            .b2{
            background-color: lightblue;
            border:5px blue  dotted;     
            color:black;
            border-radius: 10px;
            }
            .b2:hover{
            box-shadow : 0 8px 16px 0 black, 
                        0 6px 20px  0 rgba(0, 0, 0, 0.19); 
            }  
        < /style>   
    < /head>     
    < body>    
        < button class="b1">Shadow on button< /button>    
        < button class="b2">Box-shadow on hover< /button>  
    < /body>    
    < /html>

Output :

padding :
It is used to set the button padding.
Syntax :

    element {  
        // padding style  
    }

Let's understand it using an illustration.
Eg:

    < !DOCTYPE html>    
    < html>       
    < head>    
        < title>button background Color< /title>   
        < style>   
            body{  
            text-align: center;  
            }  
            button {  
                color:black;  
                font-size: 15px;   
            }   
            .b1 {   
                background-color: red;   
                border:none;  
                padding: 10px;
                box-shadow : 0 8px 16px 0 black, 
                        0 6px 20px  0 rgba(0, 0, 0, 0.19);  
            }   
            .b2 {   
                background-color: blue;   
                border:3px brown solid;  
                padding:5px 10px 15px 20px;
                box-shadow : 0 8px 16px 0 black, 
                        0 6px 20px  0 rgba(0, 0, 0, 0.19);  
            }     
            .b3{  
                background-color:orange;  
                border: 3px red dashed;  
                padding-bottom:20px;
                box-shadow : 0 8px 16px 0 black, 
                        0 6px 20px  0 rgba(0, 0, 0, 0.19);  
            }  
            .b4{  
                background-color: gray;  
                border: 3px black dotted;  
                padding-left: 25px;  
                box-shadow : 0 8px 16px 0 black, 
                        0 6px 20px  0 rgba(0, 0, 0, 0.19);
            }  
            .b5{  
                background-color: lightblue;  
                border:3px blue double;       
                padding-right: 30px; 
                box-shadow : 0 8px 16px 0 black, 
                        0 6px 20px  0 rgba(0, 0, 0, 0.19); 
            }  
        < /style>   
    < /head>      
    < body>    
        < h1>The padding property< /h1>  
        < button class="b1">none< /button>   
        < button class="b2">solid< /button>
        < button class="b3">dashed< /button>   
        < button class="b4">dotted< /button>  
        < button class="b5">double< /button>   
    < /body>    
    < /html>

Output :

The padding property

« Previous Next Topic » (CSS - Hover & Overflow Properties)