CSS Introduction | CSS3 Extensions | CSS3 Buttons

CSS3 Buttons

With CSS, you can create buttons in many shapes and in several ways. In CSS, buttons can be made not only with the <button> tag, but also with the <a> tag and the <input> tag.

<button class="btn">button tag</button>
<a href="#" class="btn">a tag</a>
<input type="button" value="input tag" class="btn">

For an input element of type button, the text displayed inside it can be set with the value attribute.

The following example shows a button whose background color changes when the mouse is placed over it.

<style>
    .btn {
        background-color: #87CEEB;
        -webkit-transition-duration: 0.4s;
        transition-duration: 0.4s;
    }
    .btn1:hover, .btn2:hover, .btn3:hover, .btn4:hover {
        background-color: #4169E1;
        color: white;
    }
</style>

As in the example above, using the transition-duration property lets you change not only the background color, but also the text color.

The following example shows a button with a shadow effect.

<style>
    .btn {
        -webkit-transition-duration: 0.4s;
        transition-duration: 0.4s;
    }
    .btn1, .btn2:hover { box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); }
</style>

As in the example above, using the box-shadow property makes it easy to set a realistic shadow effect on a button.

The following example disables a button.

<style>
    .btn2 { opacity: 0.4; cursor: not-allowed; disabled; }
</style>

As in the example above, using the disabled attribute can make a button unavailable. A disabled button appears translucent. At this time, setting the cursor property value to not-allowed can make the disabled button look more convincing.

You can also create a menu with buttons by using the float property.

<style>
    .btn {
        background-color: #87CEEB;
        border: solid 1px #00BFFF;
        text-decoration: none;
        display: inline-block;
        cursor: pointer;
        float: left;
    }
</style>

Examples of Various Button Styles

Using CSS animation effects lets you apply even more varied effects to buttons.

The following example changes the displayed content of a button when the mouse is placed over it.

<style>
    .btn span { 
        display: inline-block; 
        position: relative; 
        transition: 0.5s; 
    }
    .btn span::after { 
        content: "▶"; 
        opacity: 0; 
        transition: 0.5s;
    }
    .btn:hover span::after { 
        opacity: 1; 
        right: 0px; 
    }
</style>

In the example above, the ‘▶’ symbol is inserted immediately after the string ‘Button’ by using the ::after selector. At first, it is hidden by setting the opacity property value to 0. But when the mouse is placed over the button, the opacity property value changes to 1 and it becomes visible. At this time, the transition effect runs and gradually changes the opacity property value over 0.5 seconds.

The following example shows another color spreading like a ripple over the button when the button is pressed.

<style>
    .btn {
        background-color: orange;
        -webkit-transition-duration: 0.4s;
        transition-duration: 0.4s;
    }
    .btn::after {
        content: "";
        background-color: #FFD700;
        display: block;
        opacity: 0;
        transition: all 0.8s;
    }
    .btn:active::after { 
        opacity: 1; 
        transition: 0s
    }
</style>

The example above is implemented by setting a transition effect with the :active selector and the ::after selector.

The following example shows a button with a pressing effect like a real button.

<style>
    .btn {
        background-color: orange;
        display: inline-block;
        border: none;
        outline: none;
        border-radius: 20px;
        box-shadow: 0 9px #B0B0B0;
    }
    .btn:active {
        background-color: #FF8C00;
        box-shadow: 0 5px #808080;
        transform: translateY(4px);
    }
</style>

In the example above, the box-shadow property is first used to set a shadow effect on the button. Then, when the user presses the button, the :active selector and transform effect move the button position slightly downward. This creates the effect that the button is actually being pressed.