如何使用CSS制作按钮

　　我们先来看一下普通方形按钮的实现方法

　　按钮代码如下所示

　　HTML代码

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<metacharset="utf-8">

　　</head>

　　<body>

　　<button>普通方形按钮</button>

　　</body>

　　</html>

　　圆角按钮的实现方法

　　代码如下

　　HTML代码

　　<buttonclass="kadomaru">圆角按钮</button>

　　CSS代码

　　.kadomaru{

　　width:100px;

　　font-size:12px;

　　color:#FFFFFF;

　　text-align:center;

　　display:block;

　　padding:10px010px;

　　background:#6BCBF6;

　　border-radius:20px;

　　}

　　立体按钮的实现方法

　　代码如下

　　HTML代码

　　<buttonclass="shadow">立体按钮</button>

　　CSS代码

　　.shadow{

　　width:100px;

　　font-size:12px;

　　color:#FFFFFF;

　　text-align:center;

　　display:block;

　　padding:10px010px;

　　background:#6BCBF6;

　　border-radius:5px;

　　box-shadow:1px1px#1A6EA0;

　　}

　　使用box-shadow指定阴影大小和阴影颜色，营造立体的感觉。

　　上述三种方法实现的按钮效果如下

　　按钮

　　最后一个是带有简单动画的按钮实现，我们来看具体的示例

　　代码如下

　　HTML代码

　　<divclass="animation">

　　<divclass="effect"></div>

　　<ahref="#">Touchme</a>

　　CSS代码

　　.animation{

　　width:100px;

　　height:50px;

　　text-align:center;

　　border:2pxsolid#BBBBBB;

　　float:left;

　　cursor:pointer;

　　position:relative;

　　box-sizing:border-box;

　　overflow:hidden;

　　margin:0040px0;

　　}

　　.animationa{

　　font-family:arial;

　　font-size:12px;

　　color:#BBBBBB;

　　text-decoration:none;

　　line-height:50px;

　　transition:all.10sease;

　　z-index:2;

　　position:relative;

　　}

　　.effect{

　　width:140px;

　　height:50px;

　　top:-2px;

　　left:-140px;

　　background:#BBBBBB;

　　position:absolute;

　　transition:all.5sease;

　　z-index:1;

　　}

　　.animation:hover.effect{

　　left:0;

　　}

　　.animation:hovera{

　　color:#FFFFFF;

　　}

　　介绍定制的一个例子的话，将.effect的left属性变成right属性，并将.animation:hover.effect的left属性变更为right属性，可以变成向右的动画。

本文转载自中文网

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css3-style/c54390.shtml