CSS - Buttons

Buttonsare 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?CSS Buttons ColorsCSS Button BordersCSS Rounded ButtonsCSS Button Hover EffectCSS Button Focus and ActiveCSS Button Shadow EffectCSS Disabled ButtonsCSS Buttons WidthsCSS Buttons GroupsCSS Vertical Buttons GroupsCSS Buttons on ImageCSS Animated Buttons

How to Style a Button in CSS?

• Setting the Dimensions:In CSS,heightandwidthproperties 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. Thebackground-colorandborderproperty can be used to set color and border for any buttons in css.
• Shadow Effect:Adding a shadow effect around button usingbox-shadowproperty 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:CSSanimationcan 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 differentcolorsthat matches with UI of background color.

Setting Button Borders

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

Theborderproperty take three values thickness, type and color of border.

Example

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

Creating Rounded Buttons

We can create round cornered button or completely circular button usingborder-radiusproperty.

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

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

Example

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

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.

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 thepseudo-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.

Setting Shadow Effect on Button

In CSS, thebox-shadowproperty 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.

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 thecursorproperty to not-allowed.

Example

Here is an example.

Setting Buttons Width

We can define horizontal width for button usingwidthproperty.

Example

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

CSS Buttons Groups

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

Example

CSS Vertical Buttons Groups

Here is an example of how to create a vertical button group by settingdisplay: blockandfloat: leftproperty

Example

CSS Buttons on Image

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

Example

CSS Animated Buttons

In, CSS we can usepseudo-elementsto animate a button clicking effect.

Example

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