各种按钮样式

用css写了几个按钮样式：静态的，不可编辑的，立体的，圆角的，胶囊状的，动态效果的样式。

效果预览（录屏保存后有点抖动，稍微有点影响最后两个效果）：

要写按钮样式首先要去除按钮默认样式：

1、更改背景 background ；

2、去除边框或更改边框 border ；

3、去除默认的按钮点击后的蓝色边框，这是很容易忽略的一个：outline:none;

 

最后一个动态渐变按钮使用了css动画。

注意：在编写动态渐变按钮样式时，需要设置渐变的首尾为相同颜色。

在编写最后一个动态渐变按钮样式时，遇到一个问题：设置渐变背景时发现使用 -webkit-linear-gradient() 和使用 linear-gradient()  效果不一致，原因我还不知，希望知道的朋友可以告知一下。

代码

HTML：

<h2>静态按钮</h2>
<button class="btn">click</button>
<button class="btn disable">don't click</button>
<button class="btn shadow">click</button>
<button class="btn cir1">click</button>
<button class="btn cir2">click</button>

<h2>动态按钮</h2>
<button class="btn change change1">click</button>
<button class="btn change change2">click</button>
<button class="btn change3"><span>GO</span></button>
<button class="btn change4">click</button>

css：

.btn{
	background-color:rgba(0,180,100,1);
	border:rgba(0,180,100,1) 1px solid;
	outline:none;  /*去除点击时的蓝色边框*/
	cursor:pointer;
	padding:14px 20px;
	color:rgba(255,255,255,1);
	text-align: center;
	font-size: 16px;
	margin:10px;
}
.disable{
	background-color:rgba(0,180,100,0.5);
	cursor:not-allowed;
}
.shadow{
	box-shadow:0 5px 13px 0 rgba(0,0,0,0.3);
}
.cir1{
	border-radius:10px;
}
.cir2{
	padding:13px 25px;
	border-radius:30px;
	box-shadow:0 3px 10px 0 rgba(0,0,0,0.3);
	background: -webkit-linear-gradient(bottom,  rgba(0,180,100,0.2),  rgba(0,180,100,1), rgba(0,200,100,1) ); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(bottom,  rgba(0,180,100,0.2),  rgba(0,180,100,1), rgba(0,200,100,1) ); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(bottom,  rgba(0,180,100,0.2),  rgba(0,180,100,1), rgba(0,200,100,1) ); /* Firefox 3.6 - 15 */
    background: linear-gradient(to bottom,  rgba(0,180,100,0.2),  rgba(0,180,100,1), rgba(0,200,100,1) ); /* 标准的语法 */
}


/*动态效果*/
.change{
	 transition: all 0.5s;
    -webkit-transition: all 0.5s; /* Safari */
}
.change1:hover{
	background-color:rgba(0,180,100,0.1);
	color:rgb(0,0,0);	
}
.change2:hover{
	box-shadow:0 5px 13px 0 rgba(0,0,0,0.3);
}
.change3{
	background-color:rgba(255,100,0,1);
	border:rgba(255,120,0,1) 1px solid;
	border-radius:30px;
	width:100px;
}
.change3 span{
  transition: 0.6s;
}
.change3 span:after {
  content: ' »';
  opacity: 0;
  top: 0;
  right: -15px;
  transition: 0.6s;
}
.change3:hover span{
	padding-right:20px;
	transition: 0.6s;
}
.change3:hover span:after {
  opacity: 1;
  right: 0;
}
.change4{
	width:100px;
	border-radius:30px;
	background-image: -webkit-linear-gradient(10deg,#3CFA14,#F0FA00,#98FB98,#3CFA14);
	background-size: 200% 100%;
	animation:move 3s infinite linear;
	-webkit-animation:move 3s infinite linear; /* Safari 与 Chrome */
}
@keyframes move{
	0% {
    background-position: 0 0;
	}
    100% {
    background-position: -200% 0;
	}
}