我们先来看一下一般方形按钮的完成要领
按钮代码以下所示
HTML代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <button>一般方形按钮</button> </body> </html>
圆角按钮的完成要领
代码以下
HTML代码
<button class="kadomaru">圆角按钮</button>
CSS代码
.kadomaru { width:100px; font-size:12px; color:#FFFFFF; text-align:center; display:block; padding:10px 0 10px; background:#6BCBF6; border-radius: 20px; }
平面按钮的完成要领
代码以下
HTML代码
<button class="shadow">平面按钮</button>
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代码
<div class="animation"> <div class="effect"></div> <a href="#"> Touch me </a>
CSS代码
.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视频教程或许CSS3视频教程栏目进一步进修!!!
以上就是怎样运用CSS制造按钮的细致内容,更多请关注ki4网别的相干文章!