Article From:https://www.cnblogs.com/wy936166601/p/9970333.html

a{
font-family:Arial;
font-size:.8em;
text-align:center;
margin:3px;/*Unify all styles */

}
a:link,a:visited{ /*Hyperlinks in normal state, accessed state*/
color:#A62020;
padding:4px 10px 4px 10px;
background-color:#ecd8db;
text-decoration:none;
border-top:1px solid #eee; /*Border Shadow */
border-left:1px solid #eee;
border-bottom:1px solid #717171;
border-right:1px solid #717171;
}
a:hover{ /*Hyperlink when mouse pointer passes */
color:green; /*Change the text color */
padding:5px 8px 3px 12px; /*Change the position of the text */
background-color:#e2c4c9; /*Change background color*/
border-top:1px solid #717171; /*Frame changes to achieve the click effect */
border-left:1px solid #717171;
border-bottom:1px solid #eee;
border-right:1px solid #eee;
}

Firstly, the overall style and style of label a are set. Then, three pseudo-attributes, color background, color border and text position are modified to simulate the special effects of buttons.

Leave a Reply

Your email address will not be published. Required fields are marked *