Shulou(Shulou.com)06/01 Report--

Editor to share with you what the status of the button button in css, I believe most people do not know much, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Example of different effects of status codes for button buttons

.btn {

Appearance:none

Background:#026aa7

Color:#fff

Font-size:20px

Padding:0.65em1em

Border-radius:4px

Box-shadow:inset0-4px00rgba (0. 0. 0. 0. 2)

Margin-right:1em

Cursor:pointer

Border:0

}

.btn1: hover {

Box-shadow:inset0-4px00rgba (0re0re0penny 0.6), 008px0rgba (0pence0re0pence0core0.5)

}

.btn1: focus {

Position:relative

Top:4px

Box-shadow:inset03px5px0rgba (0Pert 00.2pm)

Outline:0

}

.btn2: hover {

Box-shadow:inset0-4px00rgba (0re0re0penny 0.6), 008px0rgba (0pence0re0pence0core0.5)

}

.btn2: active {

Position:relative

Top:4px

Box-shadow:inset03px5px0rgba (0Pert 00.2pm)

Outline:0

}

.btn2: focus {

Outline:0

}

Click will not pop up

A click will pop up.

The above code can be copied and pasted directly and tested locally, as shown in the following figure:

851d61a6396198536b518ea83cad888.png

To sum up, I'd like to summarize several states of the button button:

Normal state

Hover mouse hover statu

Active click status

Focus acquires focus status

Note: .btn: focus {outline:0;} can remove the blue border after the button or a tag is clicked

The cursor property specifies the type (shape) of the cursor to display. This attribute defines the shape of the cursor used when the mouse pointer is placed within the boundary of an element

The active selector is used to select the active link. When you click on a link, it becomes active (active).

I hope this article about the different situations of button status will be helpful to friends in need.

The above is all the content of the article "what is the status of the button button in css". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.