css3實現的美觀的提交按鈕效果

admin發表於2017-02-17
CSSS3
在css3之前要做一個立體圓角的有光澤的提交按鈕基本上就得使用圖片，css3的出現使這一切變的輕鬆簡潔起來。

下面就分享一個利用css3實現的圓角有光澤，且具有立體感的提交按鈕效果，感興趣的朋友可以做一下參考。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.button{
  background:-webkit-linear-gradient(top ,rgb(193,68,164),rgb(192,79,164) 50%,rgb(172,0,121) 50%,rgb(218, 67, 169) 100%);
  display:inline-block;
  border:rgb(169, 34, 187) solid 1px;
  box-shadow:inset rgba(255,255,255,1.0) 0px 0px 2px 0px;
  border-radius:8px;
  outline:none;
  width:256px;
  height:60px;
  cursor:pointer;
  color:#ffffff;
  font-size:25px;
}
</style>
</head>
<body>
<input class="button" type="submit" value="提交" /> 
</body>
</html>

相關文章