recherche

Maison  >  Article  >  interface Web  >  Code d'effet exquis du bouton 3D implémenté à l'aide de CSS3

Code d'effet exquis du bouton 3D implémenté à l'aide de CSS3

高洛峰
高洛峰original
2017-03-27 17:54:331832parcourir

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

Code deffet exquis du bouton 3D implémenté à laide de 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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Un beau code de bouton rond réalisé en CSS3Article suivant：Un beau code de bouton rond réalisé en CSS3

Articles Liés

Voir plus