Home >Web Front-end >HTML Tutorial >css实现的点击具有立体背景变化效果的按钮_html/css_WEB-ITnose
css实现的点击具有立体背景变化效果的按钮_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:30:231673browse
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/
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：app图标设计规范_html/css_WEB-ITnoseNext article：css实现的文字位于图片之上且背景半透明_html/css_WEB-ITnose