CSS Tutorial
CSS Properties
CSS Advance
CSS Design
CSS Questions
Miscellaneous
CSS MCQ
- css-mcq
Interview Questions
- css-interview-questions

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
}

Example

<!DOCTYPE html>  
<html>  
  
<head>  
    <title> 
        button background Color 
    </title> 
      
    <style> 
    body{
       text-align: center;
    }
        button {
           color:lightgoldenrodyellow;
            font-size: 30px; 
        } 
        .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>  

Test it Now

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
}

Example

<!DOCTYPE html>  
<html>  
  
<head>  
    <title> 
        button background Color 
    </title> 
      
    <style> 
    body{
       text-align: center;
    }
        button {
           color:lightgoldenrodyellow;
            font-size: 30px; 
        } 
        .b1 { 
            background-color: red; 
            border:none;
        } 
        .b2 { 
            background-color: blue; 
            border:5px brown solid;
        } 
        .b3 { 
            background-color: yellow; 
            color:black;
            border:5px red groove;
        } 
        .b4{
           background-color:orange;
           border: 5px red dashed;
        }
        .b5{
           background-color: gray;
           border: 5px black dotted;
        }
        .b6{
           background-color: lightblue;
           border:5px blue double;     
        }
    </style> 
</head> 
  
<body>  
   <h1>The border property</h1>
    <button class="b1">none</button> 
    <button class="b2">solid</button> 
    <button class="b3">groove</button> 
    <button class="b4">dashed</button> 
    <button class="b5">dotted</button>
    <button class="b6">double</button> 

</body>  
</html>

Test it Now

border-radius

It is used to make the rounded corners of the button. It sets the border radius of the button.

Syntax

element {
    // border-radius property
}

Example

<!DOCTYPE html>  
<html>  
  
<head>  
    <title> 
        button background Color 
    </title> 
      
    <style> 
    body{
       text-align: center;
    }
        button {
           color:lightgoldenrodyellow;
            font-size: 30px; 
        } 
        .b1 { 
            background-color: red; 
            border:none;
        } 
        .b2 { 
            background-color: blue; 
            border:5px brown solid;
            border-radius: 7px;
        } 
        .b3 { 
            background-color: yellow; 
            color:black;
            border:5px red groove;
            border-radius: 10px;
        } 
        .b4{
           background-color:orange;
           border: 5px red dashed;
           border-radius: 20px;
        }
        .b5{
           background-color: gray;
           border: 5px black dotted;
           border-radius: 30px;
        }
        .b6{
           background-color: lightblue;
           border:5px blue double;     
           border-radius: 25px;
        }
    </style> 
</head> 
  
<body>  
   <h1>The border-radius property</h1>
   <h2>Below there is the border name and border-radius</h2>
    <button class="b1">none</button> 
    <button class="b2">solid 7px</button> 
    <button class="b3">groove 10px</button> 
    <button class="b4">dashed 20px</button> 
    <button class="b5">dotted 30px</button>
    <button class="b6">double 25px</button> 

</body>  
</html>

Test it Now

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];

Example

<!DOCTYPE html>  
<html>  
  
<head>  
    <title> 
        button background Color 
    </title> 
      
    <style> 
    body{
       text-align: center;
    }
        button {
           color:lightgoldenrodyellow;
            font-size: 30px; 
        } 
        .b1{
           background-color: lightblue;
           border:5px red double;     
           border-radius: 25px;
           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 red dotted;     
           color:black;
           border-radius: 25px;
        }
        .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>

Test it Now

padding

It is used to set the button padding.

Syntax

element {
    // padding style
}

Let's understand it using an illustration.

Example

<!DOCTYPE html>  
<html>  
  
<head>  
    <title> 
        button background Color 
    </title> 
      
    <style> 
    body{
       text-align: center;
    }
        button {
           color:lightgoldenrodyellow;
            font-size: 30px; 
        } 
        .b1 { 
            background-color: red; 
            border:none;
            padding: 16px;
        } 
        .b2 { 
            background-color: blue; 
            border:5px brown solid;
            padding:15px 30px 25px 40px;
        } 
        .b3 { 
            background-color: yellow; 
            color:black;
            border:5px red groove;
            padding-top:30px;
        } 
        .b4{
           background-color:orange;
           border: 5px red dashed;
           padding-bottom:40px;
        }
        .b5{
           background-color: gray;
           border: 5px black dotted;
           padding-left: 40px;
        }
        .b6{
           background-color: lightblue;
           border:5px blue double;     
           padding-right: 40px;;
        }
    </style> 
</head> 
  
<body>  
   <h1>The padding property</h1>
    <button class="b1">none</button> 
    <button class="b2">solid</button> 
    <button class="b3">groove</button> 
    <button class="b4">dashed</button> 
    <button class="b5">dotted</button>
    <button class="b6">double</button> 

</body>  
</html>

Test it Now

Next TopicCSS Float

← prev next →

Hot Tutorials

Contact US

Email:[email protected]

CSS Buttons

10/30

CSS Tutorial

CSS Properties

CSS Advance

CSS Design

CSS Questions

Miscellaneous

CSS MCQ

Interview Questions

CSS Buttons

Basic styling in Buttons

background-color

border

border-radius

box-shadow

padding

Hot Tutorials

Contact US