CSS Tutorial
CSS - Introduction CSS - How CSS works? CSS - Syntax CSS - Colors CSS - Backgrounds CSS - Borders CSS - Margins CSS - Padding CSS - Height/Width CSS - Box Model CSS - Text CSS - Fonts CSS - Icons CSS - Cursor CSS - Outline CSS - Links CSS - Lists CSS - Tables CSS - Display CSS - Overflow CSS - Position CSS - Float CSS - Align CSS - Opacity CSS - Combinator CSS - Pseudo Classes CSS - Pseudo Elements CSS - Attribute Selector CSS - Buttons CSS - Pagination CSS - Navigation Bar CSS - Dropdowns CSS - Specificity CSS - Transition
CSS Advanced
CSS - Rounded Corners CSS - Border Image CSS - Background CSS - Gradients CSS - Shadow CSS - Text Effects CSS - 2D Transform CSS - 3D Transform CSS - Animation CSS - Object-fit CSS - Box Sizing CSS - Filters CSS - Style Images CSS - Variables CSS - Media Queries CSS - Flexbox Layout CSS - Grid Layout
CSS Responsive
RWD - Introduction RWD - Grid View RWD - Media Queries RWD - Images
CSS References
CSS - Reference CSS - Selectors CSS - Functions CSS - Units CSS - Animatable CSS - Entities

CSS Styling Buttons

This chapter will teach you how to style HTML buttons using CSS:


Basic Button

The following example shows how to create a basic button:

Run code

Button Colors

Use the background-color property to change the background color of a button:

Run code

Hoverable Buttons

Use the :hover and :focus pseudo-class to change the style of a button:

Run code

The transition property determines the speed of the "hover" effect:


Button Sizes

Use the font-size property to change the font size of a button:

Run code

Full Width Button

Use display:block; and width:100%; to make a full width button:

Run code

Outline Buttons

Use border property and :hover pseudo-class to create an outline button:

Run code

Icon inside Buttons

The following example shows how to use icons with buttons:

Run code

To learn more about Icons, visit: How to use Icons Chapter.


Disabled Button

Make buttons look inactive by adding the disabled boolean attribute to any <button> element:

Run code

The pointer-events property specifies whether or not an element can become the target of mouse events:


Button Group

Button groups allow multiple buttons to be stacked together on a single line.

Use display:inline-flex; to create a button group:

Run code

Justified Button Group

Stretch your button groups to fill all the available width by applying the display:flex; property to the btn-group element:

Run code

To learn more about the Flex, visit: CSS Flexbox Layout Chapter.


Vertical Button Group

Vertical Button group allow multiple buttons to be stacked together vertically.

Use flex-direction:column; to group the buttons vertically:

Run code