CSS | Buttons - GeeksforGeeks

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

Jun	JUL	Aug
	16
2018	2019	2020

Suggest a Topic

Recommended Posts: