How to style a button using CSS-Front-end Q&A-php.cn

How to style a button using CSS

PHPz

Release： 2023-04-13 10:33:48

Original

4772 people have browsed it

CSS is a language used for web page style design. It can achieve many interesting effects, including styling buttons. In this article, we'll cover how to style buttons using CSS.

Creating a button in HTML

First, create a button in the HTML page, as shown below:

<button>我是一个按钮</button>

Copy after login

HTML’s <button># is used here ## tag to create a button.

Set the basic style of the button

Next, we can use CSS to set the basic style for the button, including size, color, font, border, etc.

button {
  font-size: 16px;
  padding: 10px 20px;
  background-color: #3f51b5;
  color: #fff;
  border: none;
  border-radius: 5px;
}

Copy after login

This code will set the font size of all buttons to 16 pixels, and set the padding to 10 pixels top and bottom, and 20 pixels left and right. The button's background color is #3f51b5 (dark blue) and its foreground color is white. The button has no border and a corner radius of 5 pixels.

Hover effect

We can also add hover effects to the button. For example, when the user hovers the mouse pointer over a button, the button's background color changes to light blue.

button:hover {
  background-color: #2196f3;
}

Copy after login

Activation effect

When the button is clicked, we can add an activation effect, such as changing the background color of the button:

button:active {
  background-color: #1e88e5;
}

Copy after login

Disable effect

When a button is disabled, we can change the button's appearance, such as changing the text color and background color, to make the button look disabled.

button:disabled {
  background-color: #ccc;
  color: #999;
  cursor: not-allowed;
}

Copy after login

This code sets the button's background color to gray, text color to dark gray, and pointer style to the forbidden symbol.

Conclusion

In web pages, buttons are a very common element, and many interesting effects can be achieved through CSS. This article introduces how to use CSS to set the basic style, hover effect, activation effect and deactivation effect of the button. With these tips, you can add many interesting dynamic elements to your website and improve user experience.

The above is the detailed content of How to style a button using CSS. For more information, please follow other related articles on the PHP Chinese website!