BUTTON PROPERTIES

CSS Buttons

In HTML, we use the button tag to create a button, but by using CSS properties, we can style the buttons. Buttons help us to create user interaction and event processing. They are one of the widely used elements of web pages. During the form submission, to view or to get some information, we generally use buttons. Let's see the basic styling in buttons.
Basic styling in Buttons :
There are multiple properties available that are used to style the button element. Let's discuss them one by one.
background-color :
As we have discussed earlier, this property is used for setting the background color of the button element.
Syntax : 
    element {  
        // background-color style  
    }
Eg: 
    < !DOCTYPE html>    
    < html>        
    < head>    
        < title>button background Color< /title>   
    < style>   
        body{  
            text-align: center;  
        }  
        button {  
            color:lightgoldenrodyellow;  
            font-size: 15px;   
        }   
        .b1 {   
            background-color: red;   
        }   
        .b2 {   
            background-color: blue;   
        }   
        .b3 {   
            background-color: violet;   
        }   
    < /style>   
    < /head>   
    < body>    
    < h1>The background-color property.< /h1>  
    < button class="b1">Red color button< /button>   
    < button class="b2">Blue color button< /button>   
    < button class="b3">Violet color button< /button>   
    < /body>    
    < /html>
Output :

The background-color property.



border :
It is used to set the border of the button. It is the shorthand property for border-width, border-color, and border-style.
Syntax : 
    element {  
        // border style  
    }  

    < !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;  
            }   
            .b2 {   
                background-color: blue;   
                border:3px brown solid;  
            }      
            .b3{  
                background-color:orange;  
                border: 3px red dashed;  
            }  
            .b4{  
                background-color: gray;  
                border: 3px black dotted;  
            }  
            .b5{  
                background-color: lightblue;  
                border: 3px blue double;       
            }  
        < /style>   
    < /head>      
    < body>    
        < h1>The border 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 border property





(CSS - Box Shadow Propeties)