话不多说，我们直接来看代码

 

　　以下代码是接下来所有按钮样式的基本代码：

 

　　HTML

 

　　<aclass="button"href="#">Button</a>

 

　　CSS

 

　　.button{

 

　　width:80px;

 

　　height:20px;

 

　　display:block;

 

　　padding:1em3.2em;

 

　　border-radius:1.6em;

 

　　color:#fff;

 

　　font-size:18px;

 

　　font-family:'Lato',sans-serif;

 

　　font-weight:700;

 

　　text-align:center;

 

　　text-decoration:none;

 

　　}

 

　　下面button1到button4改变的是基本颜色，并且还通过box-shadow调整按钮主体的颜色透射率来描述用于每个按钮的阴影。从button5开始设计具有渐变效果的按钮。下面我们来看具体的代码实现。

 

　　button1：

 

　　.button{

 

　　background-color:rgba(252,28,143,1);

 

　　box-shadow:05px20pxrgba(252,28,143,.5);

 

　　}






本文转载自中文网