CSS - Buttons

Previous
Quiz
Next

Buttons are interactive elements that allow users to perform actions on your website or application. Buttons are commonly either rectangular or circular in shape and have a text label that says what will happen when you click on them.

While browsing web pages, you may have come across various interactive elements, such as submit buttons. In this article we will cover how to style buttons using CSS, explore different types of buttons, and discuss related properties.

Table of Contents


 

How to Style a Button in CSS?

  • Setting the Dimensions: In CSS, height and width properties can be used to adjust size of buttons in a webpage.
  • Define Color and Border: A UI compatible color and border with the right thickness make buttons stand out. The background-color and border property can be used to set color and border for any buttons in css.
  • Shadow Effect: Adding a shadow effect around button using box-shadow property enhances button style.
  • Hover Effect: Interactive styling like hover effect change the style of button when user hover the mouse over it. This can include changes in opacity, size (using transforms), etc.
  • Animated Button: CSS animation can be used to create dynamic interactive buttons.

Setting Buttons Colors

As mentioned above we can use background-color property in CSS to give right color for buttons. Check out the example

Example

In this example we use style buttons with different colors that matches with UI of background color.

<!DOCTYPE html> 
<html>

<head>
    <style>
        body{
            background: black;
            padding: 40px;
        }
        button {
            padding: 20px;
            margin-bottom: 10px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <button style="background: #FFD700">
        Yellow Button
    </button>
    <button style="background: #00FFFF">
        Blue Button
    </button>
    <button style="background: #FFFFFF">
        White Button
    </button>
    <button style="background: #FF4500">
        Orange Button
    </button>
    <button style="background: #32CD32">
        Lime Button
    </button>
</body>

</html>

Setting Button Borders

The border is space around the edge of a button. We can style a button border using border property.

The border property take three values thickness, type and color of border.

Example

Here is an example of how to create buttons with different border colors using 

<!DOCTYPE html> 
<html>

<head>
    <style>
        button {
            font-size: 12px;
            padding: 10px;
            margin: 5px;
            background-color: #f0f0f0;
        }
        .style1 {
            border: 3px solid darkred;
        }
        .style2 {
            border: 3px solid gold;
        }
        .style3 {
            border: 3px solid black;
        }
    </style>
</head>

<body>
    <button class="style1">
        darkred border
    </button>
    <button class="style2">
        gold border
    </button>
    <button class="style3">
        black border
    </button>
</body>

</html>

Creating Rounded Buttons

We can create round cornered button or completely circular button using border-radius property.

/* Round cornered button */
border-radius: 10px;

/* Circular button */
border-radius: 50%;

Example

Here is an example of how to create rounded corner buttons.

<!DOCTYPE html> 
<html>

<head>
    <style>
        button {
            font-size: 12px;
            padding: 10px;
            margin: 5px;
        }
        .style1 {
            border-radius: 10px;
            background-color: violet;
        }
        .style2 {
            border-radius: 20px;
            background-color: pink;
        }
        .style3 {
            border-radius: 50%;
            background-color: violet;
        }
</style>
</head>

<body>
    <button class="style1">
        Border-radius: 10px;
    </button>
    <button class="style2">
        Border-radius: 20px;
    </button>
    <button class="style3">
        Circle
    </button>
</body>

</html>

Button Hover Effect

Moving the mouse pointer above button without clicking on it is called hovering. We can style hover state of a button using :hover pseudo-class.

button:hover{
    property: value;
}

Example

Here is an example of creating button hover effect.

<!DOCTYPE html> 
<html>

<head>
    <style>
        button {
            font-size: 12px;
            padding: 10px;
            margin: 5px;
            background-color: #1156b3; /* Darker blue */
        }
        .style1:hover {
            background-color: #0069d9; /* Slightly darker blue */

        }
        .style2:hover {
            transform: scale(1.2); /* Size increase effect */
        }
        .style3:hover {
            background-color: lightblue; 
        }
    </style>
</head>

<body>
    <button class="style1">
        Button 1
    </button>
    <button class="style2">
        Button 2
    </button>
    <button class="style3">
        Button 3
    </button>
</body>

</html>

Button Focus and Active Styling

The focus state of a button is the state when the button is focused, typically after being clicked or tabbed into. The active state of a button is the state when the button is being clicked. We can style these states using the pseudo-class :focus. and :active

button:focus {
    property: value;
}
button:active {
    property: value;
}

Example

Here is an example focus state and active state of a button.

<!DOCTYPE html> 
<html>

<head>
    <style>
    .style-button {
        display: inline-block;
        padding: 15px;
        background-color: pink;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s ease, transform 0.1s ease;
    }
    .style-button:hover {
        background-color: violet;
    }
    .style-button:focus {
        outline: none;
        box-shadow: 0 0 5px 2px blue;
    }
    .style-button:active {
            transform: translateY(2px);
            background-color: yellow;
        }
    </style>
</head>

<body>
   <button class="style-button">Press Me</button>
</body>

</html>

Setting Shadow Effect on Button

In CSS, the box-shadow property used to add shadow effect around buttons.

A box shadow is described by horizontal and vertical offsets relative to the element, blur and spread radius, and color. Following is the syntax of box-shadow:

button { 
    box-shadow: inset horizontal vertical
                blur-radius spread-color; 
}

Example

Here is an example of how to create buttons with drop shadows. 

<!DOCTYPE html> 
<html>

<head>
    <style>
        button {
            font-size: 12px;
            padding: 10px;
            margin: 5px;
        }

       .style1 {
          background-color: pink;
          box-shadow: 0 5px 10px 0 red; 
       }
       .style2 {
          background-color: yellow;
       }
       .style3:hover {
          background-color: yellow;
          box-shadow: 0 5px 10px 0 orange;
       }
    </style>
</head>

<body>
    <button class="style1">
        Button 1
    </button>
    <button class="style2">
        Button 2
    </button>
    <button class="style3">
        Button 3
    </button>
</body>

</html>

Disabled Buttons

A disabled button is a button that is not clickable. This button can be enabled using JavaScript when certain conditions are met.

We can create a disabled button by setting the cursor property to not-allowed.

Example

Here is an example.

<!DOCTYPE html> 
<html>

<head>
    <style>
        button {
            font-size: 12px;
            padding: 10px;
            margin: 5px;
        }

        .style1 {
            background-color: pink;
            cursor: pointer;
        }
        .style2 {
            background-color: yellow;
            opacity: 0.5;
            cursor: not-allowed;
        }
    </style>
</head>
<body>
    <button class="style1">
        Normal Button
    </button>
    <button class="style2">
        Disabled Button
    </button>
</body>
</html>

Setting Buttons Width

We can define horizontal width for button using width property.

Example

Here is an example of how to create buttons with different widths.

<!DOCTYPE html> 
<html>
<head>
    <style>
        button {
            font-size: 12px;
            padding: 10px;
            margin: 5px;
        }

       .style1 {
          background-color: pink;
          width: 200px;
       }
       .style2 {
          background-color: violet;
          width: 50%;
       }
       .style3 {
          background-color: yellow;
          width: 100%;
       }
    </style>
</head>

<body>
    <button class="style1">
        width 100px
    </button><br>
    <button class="style2">
        width 50%
    </button><br>
    <button class="style3">
        width 100%
    </button><br>
</body>

</html>

CSS Buttons Groups

Here is an example of how to create a horizontal button group by removing the margins and adding the float: left property to each button.

Example

<!DOCTYPE html> 
<html>
<head>
    <style>
       .button-group {
          display: flex; 
          justify-content: center;
          float: left; 
       }
       .style-button {
          background-color: yellow;
          border: none;
          padding: 10px 20px;
          float: left;
          text-align: center;
          text-decoration: none;
          font-size: 16px;
       }
       .style-button:hover {
          background-color: orange;
       }
    </style>
</head>
<body>
   <div class="button-group">
      <button class="style-button">Submit</button>
      <button class="style-button">Cancel</button>
      <button class="style-button">Reset</button>
   </div>
</body>
</html>

CSS Vertical Buttons Groups

Here is an example of how to create a vertical button group by setting display: block and float: left property

Example

<!DOCTYPE html> 
<html>

<head>
    <style>
    .button-group { 
        justify-content: center;
        float: left; 
    }
    .style-button {
        background-color: yellow;
        border: 2px solid orange;
        padding: 10px 20px;
        text-align: center;
        display: block;
        text-decoration: none;
        font-size: 16px;
        width: 100px; 
    }
    .style-button:hover {
        background-color: violet;
    }
    </style>
</head>

<body>
    <div class="button-group">
        <button class="style-button">Home</button>
        <button class="style-button">Blog</button>
        <button class="style-button">Setting</button>
    </div>
</body>

</html>

CSS Buttons on Image

Here is an example of how to overlay a button on top of an image using relative positioning

Example

<!DOCTYPE html> 
<html>

<head>
    <style>
        .image-container {
            position: relative;
            display: inline-block;
        }
        img {
            width: 300px;
            height: 200px;
        }
        button {
            position: absolute;
            top: 40%;
            left: 30%;
            background-color: yellow;
            border: none;
            padding: 15px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 15px; 
        }
        button:hover {
            background-color: orange;
        }
    </style>
</head>

<body>
    <div class="image-container">
        <img src="/css/images/tree.jpg" alt="Your Image">
        <button>Click Me</button>
    </div>
</body>

</html>

CSS Animated Buttons

In, CSS we can use pseudo-elements to animate a button clicking effect.

Example

Here is an example of how to create animated effect on a button

<!DOCTYPE html> 
<html>

<head>
    <style>
        button {
            display: inline-block;
            padding: 15px;
            background-color: violet;
            border: none;
            text-align: center;
            text-decoration: none;
            font-size: 20px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        button::before {
            content:"";
            position: absolute;
            width: 0;
            height: 100%;
            top: 0;
            left: 0;
            background-color: pink;
            transition: width 0.3s ease-in-out;
        }
        button:hover::before {
            width: 100%;
        }
        .icon::after {
            content: '\2192'; 
            margin-left: 10px;
        }
    </style>
</head>

<body>
    <button>
        Hover Me <span class="icon"></span>
    </button>
</body>
</html>
Print Page
Previous
Next
Advertisements