Everything you need to know about graphics. Web Design, computer graphics, software and how to

How to style a button in CSS

How to style a button in CSS

By daniele

Styled buttons aid in the creation of appealing websites. You can apply a wide range of styles to the buttons. This is an article on button styling. Construct a button. Create a button element first. Make your button unique. It’s now beneficial to implement colors to your button. The hover state can be customized. The third thing is to style this same hover state so that the user can see when the status of the button changes.

1. Design a button

Construct a button> element first.

<!DOCTYPE html>

<html>

  <head>

    <title>Title of the document</title>

  </head>

  <body>

¬†¬†¬†¬†<button type=‚ÄĚbutton‚ÄĚ>Submit</button>

  </body>

</html>

2. style your button

So now is the time to customize your button.

<!DOCTYPE html>

<html>

  <head>

    <title>Title of the document</title>

    <style>

      button {

        display: inline-block;

        background-color: #7b38d8;

        border-radius: 10px;

        border: 4px double #cccccc;

        color: #eeeeee;

        text-align: center;

        font-size: 28px;

        padding: 20px;

        width: 200px;

        -webkit-transition: all 0.5s;

        -moz-transition: all 0.5s;

        -o-transition: all 0.5s;

        transition: all 0.5s;

        cursor: pointer;

        margin: 5px;

      }

    </style>

  </head>

  <body>

¬†¬†¬†¬†<button type=‚ÄĚbutton‚ÄĚ>Submit</button>

  </body>

</html>

3. Customize the hover effect

The third step is to style the hover state.

button:hover {

  background-color: green;

}

A button styling using the button> tag is styled as follows:

<!DOCTYPE html>

<html>

  <head>

    <title>Title of the document</title>

    <style>

      button {

        display: inline-block;

        background-color: #7b38d8;

        border-radius: 10px;

        border: 4px double #cccccc;

        color: #eeeeee;

        text-align: center;

        font-size: 28px;

        padding: 20px;

        width: 200px;

        transition: all 0.5s;

        cursor: pointer;

        margin: 5px;

      }

      button span {

        cursor: pointer;

        display: inline-block;

        position: relative;

        transition: 0.5s;

      }

      button span:after {

¬†¬†¬†¬†¬†¬†¬†¬†content: ‚Äė\00bb‚Äô;

        position: absolute;

        opacity: 0;

        top: 0;

        right: -20px;

        transition: 0.5s;

      }

      button:hover {

        background-color: #f7c2f9;

      }

      button:hover span {

        padding-right: 25px;

      }

      button:hover span:after {

        opacity: 1;

        right: 0;

      }

    </style>

  </head>

  <body>

    <h2>Style buttons</h2>

    <button>

      <span>Submit</span>

    </button>

  </body>

</html>

Syrus