CSS button

CSS button

In this section, we'll show you how to make buttons using CSS.

---

Basic button style

The default button CSS button

---

The color of the button

Green Blue Red Gray Black

We can use background-color property to set the button color:

---

The size of the button

10px 12px 16px 20px 24px

We can use font-size property to set the button size:

---

Fillet button

2px4px8px12px50%

We can use border-radius property to set the fillet button:

---

The color of the button border

Green, blue, red, gray, black

We can use border property to set the button border color:

---

Hover button

Green, blue, red, gray, black
Green, blue, red, gray, black

We can use :hover selector to modify the style that hovers over the button.

Tip: We can use transition-duration to set the speed of the "hover" effect:

---

Button shadow

Shadows appear when the shadow button is hovered over

We can use box-shadow property to cast a shadow on the button:

---

Disable the button

The normal button disables the button

We can use opacity to add transparency to the button (looks like the "disabled" property effect).

Tip: We can cursor property and set it to "not-allowed" to set a disabled picture:

---

The width of the button

250px
50%100%

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

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

---

The button group

ButtonButtonButtonButton

Remove margins and add float:left set button groups:

---

Bordered button groups

ButtonButtonButtonButton

We can border property to set up a bordered set of buttons:

---

Button animation