CSS Button Styling

    In this Advance CSS tutorial, we will be learning how to style the HTML <button> element.

    HTML Buttons

    In HTML, we have a dedicated <button> element to create buttons on a web page. A button is generally used to represent a clickable event, it is often used with the <form> element to submit button. Here in this article, we have provided many HTML and CSS snippets to create different buttons.

    Basic Buttons

    It's very easy to style a basic button.

    <!DOCTYPE html>
    <html>
        <head>
            <style>
                #button {
                  background-color: lightblue;
                  color: black;
                  padding: 15px 32px;
                  text-align: center;
                  font-size: 16px;
                  margin: 4px 2px;
                  cursor: pointer;
                    }
            </style>
        </head>
        <body>
            <button id ='button'>Button </button>
        </body>
    </html>

    Button Color

    To set a button color, we can use the background-color property because the color property will change the button text's color.

    Example

    Create a red color button

    <!DOCTYPE html>
    <html>
        <head>
            <style>
                #button {
                  background-color: red;
                  color: black;
                  padding: 15px 32px;
                  text-align: center;
                  font-size: 16px;
                  margin: 4px 2px;
                  cursor: pointer;
                   }
            </style>
        </head>
        <body>
            <button id ='button'>Button </button>
        </body>
    </html>

    Button Size

    The size of the button can be changed using the font-size. Because the button size alters with the size of its text.

    Example

    <!DOCTYPE html>
    <html>
        <head>
            <style>
                #button {
                  background-color: red;
                  color: black;
                  padding: 15px 32px;
                  text-align: center;
                  font-size: 24px;
                  margin: 4px 2px;
                  cursor: pointer;
                    }
            </style>
        </head>
        <body>
            <button id ='button'> Big Button </button>
        </body>
    </html>

    Round or Circle button

    By manipulating the border-radius property of a button we can create a circular button. Set the border-radius property to 50%, it will create a circular or rounded button.

    Example

    <!DOCTYPE html>
    <html>
        <head>
            <style>
                #button {
                  background-color: red;
                  color: black;
                  padding: 15px 15px;
                  text-align: center;
                  font-size: 12px;
                  border-radius: 50%;
                  margin: 4px 2px;
                  cursor: pointer;
                    }
            </style>
        </head>
        <body>
            <button id ='button'> Circular Button </button>
        </body>
    </html>

    Colored Borders Button

    Using the border property, we can define a button with a color border.

    Example

    <!DOCTYPE html>
    <html>
        <head>
            <style>
                #button {
                  background-color: red;
                  padding: 15px 32px;
                  background-color: white;
                  color: black;
                  border: 2px solid red;
                  font-size: 15px;
                  margin: 4px 2px;
                  cursor: pointer;
                    }
            </style>
        </head>
        <body>
            <button id ='button'> Red Button </button>
        </body>
    </html>

    Hoverable Color changing button

    To create a hoverable color changing button, we can use the :hover pseudo-class and transition property. The :hover pseudo-class invoke a different styling for the button when the user hovers over it and the transition property makes the changing styling smooth.

    Example

    <!DOCTYPE html>
    <html>
        <head>
            <style>
                #button {
                  padding: 15px 32px;
                  background-color: white;
                  color: black;
                  border: 2px solid red;
                  font-size: 15px;
                  margin: 4px 2px;
                  cursor: pointer;
                  transition-duration: 1s;
                    }
    
                #button:hover{
                  background-color: red;
                  color: white;
                }
            </style>
        </head>
        <body>
            <button id ='button'> Red Button </button>
        </body>
    </html>

    Button Shadow

    A shadow on a button gives it a 3D look, and using the box-shadow property, we can create a shadow for a box.

    Example

    Create a shadow when the user hovers over the button.

    <!DOCTYPE html>
    
    <html>
        <head>
            <style>
    
                #button {
                  padding: 15px 32px;
                  color: black;
                  border: 2px solid red;
                  font-size: 15px;
                  margin: 4px 2px;
                  cursor: pointer;
                  transition-duration: 1s;
                    }
    
                #button:hover{
                  background-color: red;
                  color: white;
                  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
                }
    
            </style>
        </head>
        <body>
            <button id ='button'> Red Button </button>
        </body>
    </html>

    Create a Disabled button

    To create a disable button set decreases the button opacity and set the cursor property to not-allowed

    Example

    <!DOCTYPE html>
    <html>
        <head>
            <style>
    
                #button {
                  padding: 15px 32px;
                  color: white;
                  background-color: red;
                  border: 2px solid red;
                  font-size: 15px;
                  margin: 4px 2px;
                  opacity: 0.3;
                  cursor: not-allowed;
                    }
            
            </style>
        </head>
        <body>
            <button id ='button'> Disabled Button </button>
        </body>
    </html>

    Set the button width

    The width of the button can be changed using width property

    Example

    <!DOCTYPE html>
    <html>
        <head>
            <style>
                #button {
                  padding: 15px 32px;
                  width: 100%;
                  color: white;
                  background-color: red;
                  border: 2px solid red;
                  font-size: 15px;
                  margin: 4px 2px;
                  cursor: pointer;
                    }
            </style>
        </head>
        <body>
            <button id ='button'> Full length Button </button>
        </body>
    </html>

    Group Buttons horizontally

    To group button together in a single line set the display:inline-block , float:left and there should be no margin.

    Example

    <!DOCTYPE html>
    <html>
        <head>
            <style>
                .buttons button{
                  padding: 15px 32px;
                  color: white;
                  background-color: red;
                  border: 2px solid lightblue;
                  display: inline-block;
                  font-size: 15px;
                  cursor: pointer;
                  float: left;
                    }
            </style>
        </head>
        <body>
            <div class="buttons">
                <button > Button1 </button>
                <button > Button2 </button>
                <button > Button3 </button>
                <button > Button4 </button>
            </div>
        </body>
    </html>

    Group Button vertically

    To group button vertically, set the display:block.

    Example

    <!DOCTYPE html>
    <html>
        <head>
            <style>
                .buttons button{
                  padding: 15px 32px;
                  color: white;
                  background-color: red;
                  border: 2px solid lightblue;
                  display: block;
                  font-size: 15px;
                  cursor: pointer;
                    }
               .buttons button:hover{
                background-color: lightblue;
                border-color: red;
                }
            </style>
        </head>
        <body>
            <div class="buttons">
                <button > Button1 </button>
                <button > Button2 </button>
                <button > Button3 </button>
                <button > Button4 </button>
            </div>
        </body>
    </html>

    Summary

    • The background-color property set the color of the button
    • The color property sets the text color of the button.
    • The font-size increases the size of button text and, ultimately the button itself.
    • The width property can increase and decrease the width of the button.
    • To group buttons horizontally, set the diplay:inline-block.
    • To group, the buttons vertically ser the display: block.