小编给大家分享一下使用CSS制作按钮的方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
今天的这篇文章中将给大家介绍四种按钮的实现方法,其中包括普通的方形按钮,圆角按钮,立体按钮和带有简单动画的按钮。
我们先来看一下普通方形按钮的实现方法
按钮代码如下所示
HTML代码
圆角按钮的实现方法
代码如下
HTML代码
CSS代码
.kadomaru { width:100px; font-size:12px; color:#FFFFFF; text-align:center; display:block; padding:10px 0 10px; background:#6BCBF6; border-radius: 20px; }
立体按钮的实现方法
代码如下
HTML代码
CSS代码
.shadow { width:100px; font-size:12px; color:#FFFFFF; text-align:center; display:block; padding:10px 0 10px; background:#6BCBF6; border-radius:5px; box-shadow:1px 1px #1A6EA0; }
使用box-shadow指定阴影大小和阴影颜色,营造立体的感觉。
上述三种方法实现的按钮效果如下
最后一个是带有简单动画的按钮实现,我们来看具体的示例
代码如下
HTML代码
Touch meCSS代码
.animation { width:100px; height:50px; text-align:center; border:2px solid #BBBBBB; float:left; cursor:pointer; position:relative; box-sizing:border-box; overflow:hidden; margin:0 0 40px 0; } .animation a { font-family:arial; font-size:12px; color:#BBBBBB; text-decoration:none; line-height:50px; transition:all .10s ease; z-index:2; position:relative; } .effect { width:140px; height:50px; top:-2px; left:-140px; background:#BBBBBB; position:absolute; transition:all .5s ease; z-index:1; } .animation:hover .effect { left:0; } .animation:hover a { color:#FFFFFF; }介绍定制的一个例子的话,将.effect的left属性变成right属性,并将.animation:hover .effect的left属性变更为right属性,可以变成向右的动画。
当执行上述代码时浏览器上显示如下效果:
将鼠标放在按钮上则会有一个向右的动画,显示效果如下
以上是使用CSS制作按钮的方法的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联网站制作公司行业资讯频道!
分享名称:使用CSS制作按钮的方法-创新互联
链接URL:http://bjjierui.cn/article/depijp.html