CSS Buttons

In this chapter, we introduce how to use CSS to create buttons.

Basic button style

Example

.button {
    background-color: #4C7EAF; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}

Try it Yourself »

Button Color

We can usebackground-colorAttribute to set button color:

Example

.button1 {background-color: #4C7EAF;} /*green*/ .button2 {background-color: #008CBA;} /*blue*/ .button3 {background-color: #f44336;} /*Red*/ .button4 {background-color: #e7e7e7; color: black;} /*gray*/ .button5 {background-color: #555555;} /*black*/

Try it Yourself »

Button Size

We can usefont-sizeAttribute to set button size:

Example

.button1 {font-size: 10px;} .button2 {font-size: 12px;} .button3 {font-size: 16px;} .button4 {font-size: 20px;} .button5 {font-size: 24px;}

Try it Yourself »

Rounded Button

We can useborder-radiusAttribute to set rounded button:

Example

.button1 {border-radius: 2px;} .button2 {border-radius: 4px;} .button3 {border-radius: 8px;} .button4 {border-radius: 12px;} .button5 {border-radius: 50%;}

Try it Yourself »

Button border color

We can useborderAttribute to set button border color:

Example

.button1 { background-color: white; color: black; border: 2px solid #4C7EAF; /* Green */ } ...

Try it Yourself »

Mouse hover button


We can use:hoverThe selector is used to modify the style when the mouse hovers over the button.

Tip:We can usetransition-durationThe property sets the speed of the "hover" effect:

Example

.button { -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; } .button:hover { background-color: #4C7EAF; /* Green */ color: white; } ...

Try it Yourself »

Button Shadow

We can usebox-shadowAttribute to add shadow to button:

Example

.button1 { box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); } .button2:hover { box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); }

Try it Yourself »

Disabled Button

We can useopacityThe property adds transparency to the button (looks similar to the effect of the "disabled" attribute).

Tip:We can addcursorThe property, set to "not-allowed", is used to set a disabled image:

Example

.disabled { opacity: 0.6; cursor: not-allowed; }

Try it Yourself »

Button Width


By default, the size of the button is determined by the text content on the button (the length matches based on the text content). We can usewidthAttribute to set button width:

Tip:If you want to set a fixed width, you can use pixels (px) as the unit; if you want to set a responsive button, you can set it as a percentage.

Example

.button1 {width: 250px;} .button2 {width: 50%;} .button3 {width: 100%;}

Try it Yourself »

Button Group


Remove outer margin and addfloat:leftto set up a button group:

Example

.button { float: left; }

Try it Yourself »

Button group with border


We can useborderAttribute to set bordered button group:

Example

.button { float: left; border: 1px solid green }

Try it Yourself »

Example

.btn-group button { background-color: #0457AA; /*Green Background*/ border: 1px solid green; /*Green Border*/ color: white; /*White Text*/ padding: 10px 24px; /*Padding distance,*/ cursor: pointer; /*Pointer/hand icon*/ float: left; /*Side-by-side Floating Buttons*/ }

Try it Yourself »

Button Animation

Example

Add an arrow marker after the mouse moves over the button:


Try it Yourself »

Example

Add "ripple" effect on click:


Try it Yourself »

Example

Add "press down" effect on click:


Try it Yourself »

For more button styles, you can use the CSS button generator:https://c.example.com/front-end/6222/

other extensions