各種按鈕樣式

用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;
	}
}