简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Article  >  Web Front-end  >  3D button exquisite effect code implemented using CSS3

3D button exquisite effect code implemented using CSS3

高洛峰
高洛峰Original
2017-03-27 17:54:331757browse

使用css3代码来制作3D按钮效果，这是一个系列的3D按钮制作效果，制作方法是老套（万变不离其中），但其中色彩的调各非常不错，因为很多效果在PS中制作是容易，特别对于设计师来说更容易，但对于一名coder来说，还是有点困难，具体请看制作的代码，让代码来展现所有的一切。我想您和我一样会为这样的效果折服.

3D button exquisite effect code implemented using CSS3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>CSS3实现的3D按钮效果</title>
<style>
body {
 background: -webkit-radial-gradient(#fdfdfd,#e5e5e5);
 background: -moz-radial-gradient(#fdfdfd,#e5e5e5);
 background: -ms-radial-gradient(#fdfdfd,#e5e5e5);
 background: -o-radial-gradient(#fdfdfd,#e5e5e5);
  radial-gradient(#fdfdfd,#e5e5e5);
}        
.demo {
 width: 250px;
 margin: 80px auto 0;
}
.demo div {
 margin-bottom: 20px; 
}
.onload,
.search {
 position: relative;
 display: inline-block;
 line-height: 25px;
 padding: 10px 15px;
 border-radius: 5px;
 color: #fff;
 font-weight: bold;
 text-shadow:0 1px 2px rgba(0,0,0,.4);
}
.onload {
 width: 130px;
 font-size: 14px;
}
.search {
 width: 30px;
 margin-left: 20px;
}
.onload:after,
.search:after {
 display: inline-block;
 font-family: &#39;icomoon&#39;;
 font-style: normal;
 speak: none;
 font-weight: normal;
 -webkit-font-smoothing: antialiased;
 content: "\21";
 font-size: 20px;
 padding-left: 5px;
}
. {
 content: "\22";
 padding-left: 14px;
 margin-left: 14px;
}
.onload:before,
search:before {
 position: absolute;
 top: 0;
 right: 0;
 display: inline-block;
 content: "";
 width: 90px;
 height: 59px;
 background: -webkit-radial-gradient(right,rgba(255,255,255,.3),rgba(255,255,255,0) 70%);
 background: -moz-radial-gradient(right,rgba(255,255,255,.3),rgba(255,255,255,0) 70%);
 background: -ms-radial-gradient(right,rgba(255,255,255,.3),rgba(255,255,255,0) 70%);
 background: -o-radial-gradient(right,rgba(255,255,255,.3),rgba(255,255,255,0) 70%);
  radial-gradient(right,rgba(255,255,255,.3),rgba(255,255,255,0 ) 70%);
}
.onload:hover,
.search:hover {
 color: #fff;
 text-decoration: none;
}
.onload:active,
.search:active {
 top:8px;
 box-shadow: 0 1px 6px rgba(0,0,0,.2) inset;
}
.pink {
 border:1px solid #de73bd;
 box-shadow: 0 0 0 1px #883b73,1px 5px 0 #883b73,-1px 5px 0 #883b73,0 6px 8px rgba(0,0,0,.8);
 background: -webkit-linear-gradient(top,#d745a4,#bd368d);
 background: -moz-linear-gradient(top,#d745a4,#bd368d);
 background: -ms-linear-gradient(top,#d745a4,#bd368d);
 background: -o-linear-gradient(top,#d745a4,#bd368d);
  linear-gradient(top,#d745a4,#bd368d);
}
.onload.pink:after {
 box-shadow: -1px 0 0 #8f3879,-2px 0 0 #e691cd;
}
.pink:hover {
 background: -webkit-linear-gradient(top,#ea6abd,#bd368d);
 background: -moz-linear-gradient(top,#ea6abd,#bd368d);
 background: -ms-linear-gradient(top,#ea6abd,#bd368d);
 background: -o-linear-gradient(top,#ea6abd,#bd368d);
  linear-gradient(top,#ea6abd,#bd368d);
}
.pink:active {
 background: -webkit-linear-gradient(top,#bd368d,#bd368d);
 background: -moz-linear-gradient(top,#bd368d,#bd368d);
 background: -ms-linear-gradient(top,#bd368d,#bd368d);
 background: -o-linear-gradient(top,#bd368d,#bd368d);
  linear-gradient(top,#bd368d,#bd368d);
}
.purple {
 border:1px solid #b271e5;
 box-shadow: 0 0 0 1px #883b73,1px 5px 0 #883b73,-1px 5px 0 #883b73,0 6px 8px rgba(0,0,0,.8);
 background: -webkit-linear-gradient(top,#9246d7,#8339c2);
 background: -moz-linear-gradient(top,#9246d7,#8339c2);
 background: -ms-linear-gradient(top,#9246d7,#8339c2);
 background: -o-linear-gradient(top,#9246d7,#8339c2);
  linear-gradient(top,#9246d7,#8339c2);
}
.onload.purple:after {
 box-shadow: -1px 0 0 #5d297b,-2px 0 0 #c998e7;
}
.purple:hover {
 background: -webkit-linear-gradient(top,#a35de6,#7733be);
 background: -moz-linear-gradient(top,#a35de6,#7733be);
 background: -ms-linear-gradient(top,#a35de6,#7733be);
 background: -o-linear-gradient(top,#a35de6,#7733be);
  linear-gradient(top,#a35de6,#7733be);
}
.purple:active {
 background: -webkit-linear-gradient(top,#8339c2,#8339c2);
 background: -moz-linear-gradient(top,#8339c2,#8339c2);
 background: -ms-linear-gradient(top,#8339c2,#8339c2);
 background: -o-linear-gradient(top,#8339c2,#8339c2);
  linear-gradient(top,#8339c2,#8339c2);
}
.sky_blue {
 border:1px solid #7cccff;
 box-shadow: 0 0 0 1px #007ac7,1px 5px 0 #007ac7,-1px 5px 0 #007ac7,0 6px 8px rgba(0,0,0,.8);
 background: -webkit-linear-gradient(top,#4db5fe,#3c9be2);
 background: -moz-linear-gradient(top,#4db5fe,#3c9be2);
 background: -ms-linear-gradient(top,#4db5fe,#3c9be2);
 background: -o-linear-gradient(top,#4db5fe,#3c9be2);
  linear-gradient(top,#4db5fe,#3c9be2);
}
.onload.sky_blue:after {
 box-shadow: -1px 0 0 #2c6c7f,-2px 0 0 #99d5fa;
}
.sky_blue:hover {
 background: -webkit-linear-gradient(top,#76c6ff,#3c9ce4);
 background: -moz-linear-gradient(top,#76c6ff,#3c9ce4);
 background: -ms-linear-gradient(top,#76c6ff,#3c9ce4);
 background: -o-linear-gradient(top,#76c6ff,#3c9ce4);
  linear-gradient(top,#76c6ff,#3c9ce4);
}
.sky_blue:active {
 background: -webkit-linear-gradient(top,#3c9be2,#3c9be2);
 background: -moz-linear-gradient(top,#3c9be2,#3c9be2);
 background: -ms-linear-gradient(top,#3c9be2,#3c9be2);
 background: -o-linear-gradient(top,#3c9be2,#3c9be2);
  linear-gradient(top,#3c9be2,#3c9be2);
}
.green {
 border:1px solid #9bcf60;
 box-shadow: 0 0 0 1px #469a44,1px 5px 0 #469a44,-1px 5px 0 #469a44,0 6px 8px rgba(0,0,0,.8);
 background: -webkit-linear-gradient(top,#8dd845,#6fbb31);
 background: -moz-linear-gradient(top,#8dd845,#6fbb31);
 background: -ms-linear-gradient(top,#8dd845,#6fbb31);
 background: -o-linear-gradient(top,#8dd845,#6fbb31);
  linear-gradient(top,#8dd845,#6fbb31);
}
.onload.green:after {
 box-shadow: -1px 0 0 #597b2d,-2px 0 0 #c6e897;
}
.green:hover {
 background: -webkit-linear-gradient(top,#9de15d,#74bf37);
 background: -moz-linear-gradient(top,#9de15d,#74bf37);
 background: -ms-linear-gradient(top,#9de15d,#74bf37);
 background: -o-linear-gradient(top,#9de15d,#74bf37);
  linear-gradient(top,#9de15d,#74bf37);
}
.green:active {
 background: -webkit-linear-gradient(top,#6fbb31,#6fbb31);
 background: -moz-linear-gradient(top,#6fbb31,#6fbb31);
 background: -ms-linear-gradient(top,#6fbb31,#6fbb31);
 background: -o-linear-gradient(top,#6fbb31,#6fbb31);
  linear-gradient(top,#6fbb31,#6fbb31);
}
.yellow {
 border:1px solid #e0e571;
 box-shadow: 0 0 0 1px #87883b,1px 5px 0 #87883b,-1px 5px 0 #87883b,0 6px 8px rgba(0,0,0,.8);
 background: -webkit-linear-gradient(top,#d1d744,#bbbf39);
 background: -moz-linear-gradient(top,#d1d744,#bbbf39);
 background: -ms-linear-gradient(top,#d1d744,#bbbf39);
 background: -o-linear-gradient(top,#d1d744,#bbbf39);
  linear-gradient(top,#d1d744,#bbbf39);
}
.onload.yellow:after {
 box-shadow: -1px 0 0 #597b2d,-2px 0 0 #c6e897;
}
.yellow:hover {
 background: -webkit-linear-gradient(top,#dadd50,#c0c442);
 background: -moz-linear-gradient(top,#dadd50,#c0c442);
 background: -ms-linear-gradient(top,#dadd50,#c0c442);
 background: -o-linear-gradient(top,#dadd50,#c0c442);
  linear-gradient(top,#dadd50,#c0c442);
}
.yellow:active {
 background: -webkit-linear-gradient(top,#bbbf39,#bbbf39);
 background: -moz-linear-gradient(top,#bbbf39,#bbbf39);
 background: -ms-linear-gradient(top,#bbbf39,#bbbf39);
 background: -o-linear-gradient(top,#bbbf39,#bbbf39);
  linear-gradient(top,#bbbf39,#bbbf39);
}
.orange {
 border:1px solid #e5bf76;
 box-shadow: 0 0 0 1px #88683b,1px 5px 0 #88683b,-1px 5px 0 #88683b,0 6px 8px rgba(0,0,0,.8);
 background: -webkit-linear-gradient(top,#e0b956,#bb8231);
 background: -moz-linear-gradient(top,#e0b956,#bb8231);
 background: -ms-linear-gradient(top,#e0b956,#bb8231);
 background: -o-linear-gradient(top,#e0b956,#bb8231);
  linear-gradient(top,#e0b956,#bb8231);
}
.onload.orange:after {
 box-shadow: -1px 0 0 #7e6a33,-2px 0 0 #e8ce98;
}
.orange:hover {
 background: -webkit-linear-gradient(top,#e7c369,#c18838);
 background: -moz-linear-gradient(top,#e7c369,#c18838);
 background: -ms-linear-gradient(top,#e7c369,#c18838);
 background: -o-linear-gradient(top,#e7c369,#c18838);
  linear-gradient(top,#e7c369,#c18838);
}
.orange:active {
 background: -webkit-linear-gradient(top,#bb8231,#bb8231);
 background: -moz-linear-gradient(top,#bb8231,#bb8231);
 background: -ms-linear-gradient(top,#bb8231,#bb8231);
 background: -o-linear-gradient(top,#bb8231,#bb8231);
  linear-gradient(top,#bb8231,#bb8231);
}
.red {
 border:1px solid #e57171;
 box-shadow: 0 0 0 1px #883b3b,1px 5px 0 #883b3b,-1px 5px 0 #883b3b,0 6px 8px rgba(0,0,0,.8);
 background: -webkit-linear-gradient(top,#d74444,#c43a3a);
 background: -moz-linear-gradient(top,#d74444,#c43a3a);
 background: -ms-linear-gradient(top,#d74444,#c43a3a);
 background: -o-linear-gradient(top,#d74444,#c43a3a);
  linear-gradient(top,#d74444,#c43a3a);
}
.onload.red:after {
 box-shadow: -1px 0 0 #8b3737,-2px 0 0 #e69090;
}
.red:hover {
 background: -webkit-linear-gradient(top,#e25c5c,#cc4646);
 background: -moz-linear-gradient(top,#e25c5c,#cc4646);
 background: -ms-linear-gradient(top,#e25c5c,#cc4646);
 background: -o-linear-gradient(top,#e25c5c,#cc4646);
  linear-gradient(top,#e25c5c,#cc4646);
}
.orange:active {
 background: -webkit-linear-gradient(top,#c43a3a,#c43a3a);
 background: -moz-linear-gradient(top,#c43a3a,#c43a3a);
 background: -ms-linear-gradient(top,#c43a3a,#c43a3a);
 background: -o-linear-gradient(top,#c43a3a,#c43a3a);
  linear-gradient(top,#c43a3a,#c43a3a);
}
.gray {
 border:1px solid #d6d6d7;
 box-shadow: 0 0 0 1px #919191,1px 5px 0 #919191,-1px 5px 0 #919191,0 6px 8px rgba(0,0,0,.8);
 background: -webkit-linear-gradient(top,#bdbebf,#ababac);
 background: -moz-linear-gradient(top,#bdbebf,#ababac);
 background: -ms-linear-gradient(top,#bdbebf,#ababac);
 background: -o-linear-gradient(top,#bdbebf,#ababac);
  linear-gradient(top,#bdbebf,#ababac);
}
.onload.gray:after {
 box-shadow: -1px 0 0 #7b7a7a,-2px 0 0 #dbdbdc;
}
.gray:hover {
 background: -webkit-linear-gradient(top,#cbcccd,#9e9fa0);
 background: -moz-linear-gradient(top,#cbcccd,#9e9fa0);
 background: -ms-linear-gradient(top,#cbcccd,#9e9fa0);
 background: -o-linear-gradient(top,#cbcccd,#9e9fa0);
  linear-gradient(top,#cbcccd,#9e9fa0);
}
.gray:active {
 background: -webkit-linear-gradient(top,#ababac,#ababac);
 background: -moz-linear-gradient(top,#ababac,#ababac);
 background: -ms-linear-gradient(top,#ababac,#ababac);
 background: -o-linear-gradient(top,#ababac,#ababac);
  linear-gradient(top,#ababac,#ababac);
}
@font-face {
 font-family: &#39;icomoon&#39;;
 url(&#39;fonts /icomoon.eot&#39;);
 url(&#39;fonts /icomoon.eot?#iefix&#39;) format(&#39;embedded-opentype&#39;),
  url(&#39;fonts/icomoon.svg#icomoon&#39;) format(&#39;svg&#39;),
  url(&#39;fonts/icomoon.woff&#39;) format(&#39;woff&#39;),
  url(&#39;fonts/icomoon.ttf&#39;) format(&#39;truetype&#39;);
 font-weight: normal;
 font-style: normal;
}
</style>

</head>


<body>
<form action="">
<div class="clearfix">
<a href="#" class="onload pink">DOWNLOAD</a>
<a href="#" class="search pink"></a>
</div>
<div class="clearfix">
<a href="#" class="onload purple">DOWNLOAD</a>
<a href="#" class="search purple"></a>
</div>
<div class="clearfix">
<a href="#" class="onload sky_blue">DOWNLOAD</a>
<a href="#" class="search sky_blue"></a>
</div>
<div class="clearfix">
<a href="#" class="onload green">DOWNLOAD</a>
<a href="#" class="search green"></a>
</div>
<div class="clearfix">
<a href="#" class="onload yellow">DOWNLOAD</a>
<a href="#" class="search yellow"></a>
</div>
<div class="clearfix">
<a href="#" class="onload orange">DOWNLOAD</a>
<a href="#" class="search orange"></a>
</div>
<div class="clearfix">
<a href="#" class="onload red">DOWNLOAD</a>
<a href="#" class="search red"></a>
</div>
<div class="clearfix">
<a href="#" class="onload gray">DOWNLOAD</a>
<a href="#" class="search gray"></a>
</div>
</form>    
</body>
</html>

The above is the detailed content of 3D button exquisite effect code implemented using CSS3. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：A beautiful round button code made using CSS3Next article：A beautiful round button code made using CSS3

Related articles

See more