CSS | Buttons

Buttons are one of the most used elements in web pages. Buttons are used for event processing and interacting with the user. From submitting a form, to getting to view some information, we have to click on buttons.
Button tag is used to create button in HTML. A simple example of button tag are given below:

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html
<head>
    <title>
        button tag
    </title>
</head>
<body
    <h1>GeeksforGeeks</h1>
      
    <h2>button tag</h2>
      
    <button>Button</button>
</body>
</html>                    

chevron_right


Output:

Basic Styling in button: There are many CSS property used to style the button element which are discussed below:

  • background-color: This property is used to set the background color of the button.

    Syntax:

    element {
        // background-color style
    }

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html> 
    <html
      
    <head
        <title>
            button background Color
        </title>
          
        <style>
            .button {
                border: none;
                color: white;
                text-align: center;
                font-size: 20px;
            }
            .b1 {
                  
                /* Set button background color */
                background-color: red;
            }
            .b2 {
                  
                 /* Set button background color */
                background-color: blue;
            }
            .b3 {
                  
                 /* Set button background color */
                background-color: green;
            }
            .b4 {
                  
                 /* Set button background color */
                background-color: yellow;
            }
        </style>
    </head>
      
    <body
        <button class="button b1">Red</button>
        <button class="button b2">Blue</button>
        <button class="button b3">Green</button>
        <button class="button b4">Yellow</button>
    </body
    </html>                    

    chevron_right

    
    

    Output:

  • border: This property is used to set the border of the button.

    Syntax:

    element {
        // border style
    }

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html> 
    <html
      
    <head
        <title>
            button background Color
        </title>
          
        <style>
            .button {
                background-color: red;
                color: white;
                text-align: center;
                font-size: 20px;
            }
            .b1 {
                  
                /* Set border property */
                border : none;
            }
            .b2 {
                  
                /* Set border property */
                border : 2px black solid;
            }
            .b3 {
                  
                /* Set border property */
                border : 2px black dashed;
            }
            .b4 {
                  
                /* Set border property */
                border : 2px black double;
            }
            .b5 {
                  
                /* Set border property */
                border : 2px black groove;
            }
        </style>
    </head>
      
    <body
        <button class="button b1">None</button>
        <button class="button b2">Solid</button>
        <button class="button b3">Dashed</button>
        <button class="button b4">Double</button>
        <button class="button b5">Groove</button>
    </body
    </html>                    

    chevron_right

    
    

    Output:

  • color: This property is used to set the color of text in the button. The color value can be set in terms of color name, color hex code etc.

    Syntax:

    element {
        // color style
    }

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html> 
    <html
      
    <head
        <title>
            button background Color
        </title>
          
        <style>
            .button {
                background-color: red;
                border:none;
                text-align: center;
                font-size: 20px;
            }
            .b1 {
                  
                /* Set the color of text */
                color: white;
            }
            .b2 {
                  
                /* Set the color of text */
                color: black;
            }
            .b3 {
                  
                /* Set the color of text */
                color: blue;
            }
        </style>
    </head>
      
    <body
        <button class="button b1">White</button>
        <button class="button b2">Black</button>
        <button class="button b3">Blue</button>
    </body
    </html>                    

    chevron_right

    
    

    Output :

  • padding: This property is used to set the padding in the button.

    Syntax:

    element {
        // padding style
    }

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html> 
    <html
      
    <head
        <title>
            button padding property
        </title>
          
        <style>
            .b {
              border : none;
              font-size: 16px;
            }
               
            .b1 {
                background-color: red;
                padding : 15px 32px;
            }
            .b2 {
                background-color: blue;
                padding: 24px 50px;
            }
            .b3 {
                background-color: green;
                padding: 32px 32px;
            }
            .b4 {
                background-color: yellow;
                padding: 16px;
            }
        </style>
    </head>
      
    <body
        <button class="button b1">15px 32px</button>
        <button class="button b2">24px 50px</button>
        <button class="button b3">32px 32px</button>
        <button class="button b4">16px</button>
    </body
    </html>                    

    chevron_right

    
    

    Output:

  • font-size: This property is used to set the size of the text in the button. Change the pixel value to get the desired size.

    Syntax:

    element {
        // font-size style
    }

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html> 
    <html
      
    <head
        <title>
            button font-size property
        </title>
          
        <style>
            .button {
                padding : 15px 32px;
                border : none /* none */
                font-size: 16px;
            }
               
            .b1 {
                background-color: red;
                font-size: 10px;
            }
            .b2 {
                background-color: blue;
                font-size: 15px;
            }
            .b3 {
                background-color: green;
                font-size: 20px;
            }
            .b4 {
                background-color: yellow;
                font-size: 30px;
            }
        </style>
    </head>
      
    <body
        <button class="button b1">10px </button>
        <button class="button b2">15px</button>
        <button class="button b3">20px</button>
        <button class="button b4">30px</button>
    </body
    </html>                    

    chevron_right

    
    

    Output:

  • border-radius: This property is used to set the border radius of button. It sets the rounded corners of border.

    Syntax:

    element {
        // border-radius property
    }

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html> 
    <html
      
    <head
        <title>
            button border-radius property
        </title>
          
        <style>
            .b {
                padding : 15px 32px;
                border : none;
                font-size: 16px;
            }
            .b1 {
                background-color: red;
                border-radius: 3px;
            }
            .b2 {
                background-color: blue;
                border-radius: 6px;
            }
            .b3 {
                background-color: green;
                border-radius: 10px;
            }
            .b4 {
                background-color: yellow;
                border-radius: 20px;
            }
            .b5 {
                background-color: orange;
                border-radius: 50%;
            }
        </style>
    </head>
      
    <body
        <button class="b b1">3px </button>
        <button class="b b2">6px</button>
        <button class="b b3">10px</button>
        <button class="b b4">20px</button>
        <button class="b b5">50%</button>
    </body
    </html>                    

    chevron_right

    
    

    Output:

  • box-shadow:This property is used to create shadow of button box.

    Syntax:

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

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html> 
    <html
      
    <head
        <title>
            button box-shadow property
        </title>
          
        <style>
            .b {
                padding : 15px 32px;
                border : none /* none */
                font-size: 16px;
                color: white;
            }
            .b1 {
                background-color: green;
                box-shadow : 0 8px 16px 0 rgba(0, 0, 0, 0.2),
                        0 6px 20px 0 rgba(0, 0, 0, 0.19);
            }
        </style>
    </head>
      
    <body
        <button class="b b1">Shadow 1 </button>
    </body
    </html>                    

    chevron_right

    
    

    Output:

  • width: This property is used to set the width of button.

    Style:

    element {
        // width property
    }

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html> 
    <html
      
    <head
        <title>button width property</title>
        <style>
            .button {
                padding : 15px 32px;
                border : none;
                font-size: 16px;
                color: white;
            }
              
            .b1 {
                background-color: red;
                width: 100px;
            }
            .b2 {
                background-color: blue;
                width: 200px;
            }
            .b3 {
                background-color: green;
                width: 50%;
            }
            .b4 {
                background-color: yellow;
                width: 100%;
            }
        </style>
    </head
      
    <body>
        <button class="button b1">100px </button>
        <button class="button b2">200px </button>
        <button class="button b3">50% </button>
        <button class="button b4">100%</button>
    </body
    </html>                    

    chevron_right

    
    

    Output:

  • Hover Effects: This property is used to change the button interface when mouse move over.

    Syntax:

    element:hover {
        // CSS property
    }

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html> 
    <html
      
    <head
        <title>button width property</title>
          
        <style>
            .button {
                padding : 15px 32px;
                border : none 
                font-size: 16px;
                color: white;
                transition-duration: 0.3s;
            }
            .b1 {
                background-color: green;
            }
            .b2 {
                background-color: orange;
            }
            .b1:hover {
                background-color: white;
                color: orange;
            }
            .b2:hover {
                background-color: white;
                color: green;
            }
        </style>
    </head
      
    <body>
        <button class="button b1">Green </button>
        <button class="button b2">Orange </button>
    </body
    </html>                    

    chevron_right

    
    

    Output:



My Personal Notes arrow_drop_up

Developer

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

1


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.