suchen

Heim >Web-Frontend >CSS-Tutorial >Exquisiter Effektcode für 3D-Schaltflächen, implementiert mit CSS3

Exquisiter Effektcode für 3D-Schaltflächen, implementiert mit CSS3

高洛峰
高洛峰Original
2017-03-27 17:54:331863Durchsuche

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

Exquisiter Effektcode für 3D-Schaltflächen, implementiert mit 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>

Das obige ist der detaillierte Inhalt vonExquisiter Effektcode für 3D-Schaltflächen, implementiert mit CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Ein wunderschöner Code für runde Schaltflächen, erstellt mit CSS3Nächster Artikel：Ein wunderschöner Code für runde Schaltflächen, erstellt mit CSS3

In Verbindung stehende Artikel

Mehr sehen