CSS Buttons Styling

Buttons are clickable elements that perform certain actions when pressed. For example,

The above example shows the default button and a button with CSS style.


Create a Button

A button is created using a <button> element. For example,

<button>button</button>

Browser Output

Here, the default button doesn't look good without any styles.


Style a Button

We can use the following properties to style a button,

  • background-color: changes the background color of a button
  • padding: adds padding to the button
  • width: sets the width of the button
  • border: specifies the border to the button
  • border-radius: rounds the corners of the button
  • box-shadow: adds a shadow effect to the button

Let's look at an example,

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS buttons</title>
    </head>

    <body>
        <button class="button">Submit</button>
    </body>

</html>
.button {
    background-color: purple;
    border-radius: 5px;
    font-weight: bold;
    font-size: 18px;
    font-family: monospace;
    color: white;
    padding: 20px;
    margin-left: 10px;
    text-align: center;
    cursor: pointer;
}

Browser Output

In the above example,

  • background-color: purple adds a purple color to button background
  • border-radius: 5px makes the corners of the button rounded with a 5px radius
  • font-weight: bold bolds the button text
  • font-size: 18px sets the font size to 18px
  • font-family: monospace: defines the font family of the button text
  • color: white sets the text color to white
  • padding: 20px adds a padding of 20px in the button
  • text-align: center aligns the button text in the center
  • cursor: pointer changes the cursor to pointer on button hover

Style Button States

A button has three different states as,

  • Hover
  • Focus
  • Active

Let's look at each of them in detail.


Style Hover State

The hover state is triggered when the user puts the cursor over an element.

The :hover pseudoclass selector is used to add styles for the hover state.

Let's see an example,

.button:hover{
    background-color: red;
}

Browser Output

Here, the background changes from purple to red during the button hover.

Note: The transition property creates a smooth transition of styles when the button is hovered.


Style Focus State

The focus state is triggered when an element receives the keyboard focus.

The :focus pseudoclass selector is used to add styles for the focus state.

The button is focused using the Tab key from the keyword.

Let's see an example,

.button:focus {
    background-color: red;
}

Browser Output

Here, the background color changes from purple to red when the button is focused.


Style Active State

The active state is triggered when the user actively interacts with elements.

The :active pseudo class selector is used to add styles for the active state.

Let's see an example,

.button:active {
    background-color: red;
}

Browser Output

Here, the background color of the button changes to red when it is clicked.


Shadow Button

The box-shadow property is used to add shadow to a button. For example,

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS shadow button</title>
    </head>

    <body>
        <button class="button1">Normal Button</button>
        <button class="button2">Shadowed Button</button>
    </body>

</html>
/* styles both buttons */
.button1, .button2 {
    background-color: purple;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    font-size: 18px;
    font-family: "Courier New", Courier, monospace;
    color: white;
    padding: 20px;
    margin-left: 10px;
    text-align: center;
    cursor: pointer;
}

/* adds shadow effect to button2 on hover*/
.button2:hover {
    box-shadow: 0px 0px 12px 4px rgba(0,0,0,0.74);
}

Browser Output

In the above example,

box-shadow: 0px 0px 12px 4px rgba(0,0,0,0.74);

creates a shadow around the button when it is hovered over.


Disabled Button

A disabled button can be created using the opacity property. For example,

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS disabled button</title>
    </head>

    <body>
        <button class="button1">Normal Button</button>
        <button class="button2">Disabled Button</button>
    </body>

</html>
.button1, .button2 {
    background-color: purple;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    font-size: 18px;
    font-family: "Courier New", Courier, monospace;
    color: white;
    padding: 20px;
    margin-left: 10px;
    text-align: center;
    cursor: pointer;
}

/* disables button2 on hover*/
.button2:hover {
    opacity: 0.4;
    cursor: not-allowed;
}

Browser Output

The above example shows two buttons: normal and disabled.

Note: The cursor property allows to add different types of cursor while hovering over the element.


Animated Button

We can add different animation effects to our button to enhance the user experience. For example,

/* adds animation effect to button2 on hover*/
.button2:hover {
    bottom: 12px;
}

Browser Output

The above example shows a normal and animated button.


CSS Button Example

Let's look at the various styled button examples,

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS Button Styling</title>
    </head>

    <body>
        <button class="button button1">Button 1</button>
        <button class="button button2">Button 2</button>
        <button class="button button3">Button 3</button>
        <button class="button button4">Button 4</button>
        <button class="button button5">Button 5</button>
    </body>

</html>
.button {
    color: white;
    border: none;
    cursor: pointer;
    font-weight: bold;
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif;
    margin-right: 10px;
    padding: 12px 18px;
    border-radius: 4px;
}

.button1 {
    background-color: purple;
}

.button1:hover {
    box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, 0.44);
}

.button2 {
    color: black;
    border: 1px solid black;
    transition: all 0.4s ease;
}

.button2:hover {
    background-color: red;
    color: white;
}

.button3 {
    background-color: red;
    transition: transform 0.5s ease;
}

.button3:hover {
    transform: translateY(-5px);
    color: black;
}

.button4 {
    border-radius: 0px;
    background-color: black;
    transition: all 0.4s ease;
    border: 1px solid black;
}

.button4:hover {
    background-color: white;
    color: black;
}

.button5 {
    background: linear-gradient(to right, orange, red);
    transform: all 0.3s ease;
}

.button5:hover {
    background: linear-gradient(to right, red, orange);
}

.button:active {
    color: black;
}

Browser Output

The above example shows different CSS styled buttons.

Our premium learning platform, created with over a decade of experience and thousands of feedbacks.

Learn and improve your coding skills like never before.

Try Programiz PRO
  • Interactive Courses
  • Certificates
  • AI Help
  • 2000+ Challenges