Skip to content
Related Articles

Related Articles

Improve Article

CSS | Buttons

  • Difficulty Level : Medium
  • Last Updated : 21 Feb, 2019

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:




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

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:




    <!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>                    

    Output:

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

    Syntax:

    element {
        // border style
    }

    Example:




    <!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>                    

    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:




    <!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>                    

    Output :

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

    Syntax:

    element {
        // padding style
    }

    Example:




    <!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>                    

    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:




    <!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>                    

    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:




    <!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>                    

    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:




    <!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>                    

    Output:

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

    Style:

    element {
        // width property
    }

    Example:




    <!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>                    

    Output:

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

    Syntax:

    element:hover {
        // CSS property
    }

    Example:




    <!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>                    

    Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :