Maison >interface Web >tutoriel HTML >css实现的点击具有立体背景变化效果的按钮_html/css_WEB-ITnose
css实现的点击具有立体背景变化效果的按钮_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-24 11:30:231667parcourir
css实现的点击具有立体背景变化效果的按钮:
一般来讲原生态的东西都比较粗放，网页中的按钮也是如此，下面就介绍一下美化按钮的方法，就是给链接设置一个背景图片，并且设置链接默认状态下和按下状态的背景图片，这样就实现我们想要的效果。
代码如下:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">.clear{ overflow: hidden; width: 100%;}a.button{ background: transparent url('mytest/demo/bg_button_a.gif') no-repeat scroll top right; color:#444; display:block; float:left; font:normal 12px arial, sans-serif; height:24px; margin-right:6px; padding-right:18px; /* sliding doors padding */ text-decoration:none;}a.button span{ background:transparent url('mytest/demo/bg_button_span.gif') no-repeat; display:block; line-height:14px; padding:5px 0 5px 18px;}a.button:active{ background-position: bottom right; color:#000; outline:none;}a.button:active span { background-position:bottom left; padding:6px 0 4px 18px; }</style></head><body><a class="button" href="javascript:void(0);"><span>按钮</span></a></body></html>
以上代码实现了我们的要求，代码比较简单这里就不多介绍了，可以参阅相关阅读。
相关阅读:
1.:active可以参阅CSS中a:link、a:visited、a:hover、a:active的用法一章节。
2.background-position可以参阅CSS的background-position定位详解一章节。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=12737
更多内容可以参阅:http://www.softwhy.com/divcss/
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：app图标设计规范_html/css_WEB-ITnoseArticle suivant：css实现的文字位于图片之上且背景半透明_html/css_WEB-ITnose