HTML code:
<body> <a class="anniu" href="http://www.baidu.com/"> Baidu </a> </body>
CSS code:
/* CSS Document */ .anniu{ display:block; width:120px; height:40px; background-color:#333333; color:#FFFFFF; text-align:center; font-size:18px; line-height:40px; border-radius: 25px; border:none; box-shadow:none; text-decoration: none; transition: box-shadow 0.5s; -webkit-transition: box-shadow 0.5s; } .anniu:hover{ box-shadow:0px 0px 5px 1px #808080; } .anniu:active{ box-shadow:0px 0px 5px 1px #FF0000; }
Detailed explanation
Link style:
- a:link - normal, unvisited link
- a:visited - the link the user has already visited
- a:hover - when the user mouses over the link
- a:active - the moment the link was clicked
transition property:
1. Specify the name of the CSS property, transition effect
2. The transition effect needs to specify how many seconds or milliseconds to complete
3. Specify the speed curve of the transition effect
4. Define when the transition effect starts