Quantcast
Channel: w3cplus
Viewing all articles
Browse latest Browse all 1557
↧

藤藤每日一练——Pure CSS3 3D Buttons

October 27, 2012, 12:44 am
$
0
0
Pure CSS3 3D Buttons

今天的案例是个老案例，使用ＣＳＳ３代码来制作３D按钮效果，ｗ３ｃｐｌｕｓ有关于ｂｕｔｔｏｎｓ的介绍已经很多，如果你没有看过，不仿点击这里。今天藤藤给大家带来的还是一个系列的３D按钮制作效果，制作方法是老套（万变不离其中），但其中色彩的调各让我很折服，因为很多效果在ｐｓ中制作是容易，特别对于设计师来说更容易，但对于一名ｃｏｄｅｒ来说，还是有点困难，具体请看制作的代码，让代码来展现所有的一切。我想您和我一样会为这样的效果折服，至少我已膜拜藤藤以ｃｓｓ３的了解，以及其对制作过程中的细节的追求。

demodownload

HTML CODE

<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>

CSS　CODE

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);
 background: 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: 'icomoon';
 font-style: normal;
 speak: none;
 font-weight: normal;
 -webkit-font-smoothing: antialiased;
 content: "\21";
 font-size: 20px;
 padding-left: 5px;
}
.onload:after {
 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%);
 background: 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);
 background: 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);
 background: 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);
 background: 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);
 background: 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);
 background: 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);
 background: 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);
 background: 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);
 background: 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);
 background: 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);
 background: 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);
 background: 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);
 background: 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);
 background: 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);
 background: 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);
 background: 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);
 background: 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);
 background: 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);
 background: 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);
 background: 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);
 background: 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);
 background: 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);
 background: 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);
 background: 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);
 background: linear-gradient(top,#ababac,#ababac);
}
@font-face {
 font-family: 'icomoon';
 src:url('fonts/icomoon.eot');
 src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
  url('fonts/icomoon.svg#icomoon') format('svg'),
  url('fonts/icomoon.woff') format('woff'),
  url('fonts/icomoon.ttf') format('truetype');
 font-weight: normal;
 font-style: normal;
}

demodownload

如需转载，烦请注明出处：http://www.w3cplus.com/demo/pure-css3-3d-buttons.html

↧
Search
Viewing all articles
Browse latest Browse all 1557

Trending Articles

《沈冰自述——我和周永康的故事》全本

February 8, 2015, 9:08 pm

Moog - Subsequent 25

January 16, 2020, 12:00 am

出售: 林憶蓮•回來愛的身邊 (東芝1A1頭版)

March 9, 2013, 11:02 am

筆記 - 使用 PowerShell 清除停用 AD 帳號與 OU

July 16, 2019, 11:03 pm

df-dferh-01 中国区 Android 安装 Google Play Store 后报错 的 解决办法

April 24, 2019, 6:56 am

「一棒接一棒、棒棒強棒」108學年度家長會長交接典禮

October 28, 2019, 8:49 pm

吸烟与MBTI类型判断捷径 (豆瓣 INFJ的奇幻之旅小组)

December 28, 2017, 6:55 pm

acermark龍璿國際 展出多款包裝設備

April 18, 2016, 6:02 am

枋寮北勢寮隆山宮 睽違12年再辦迎王祭典

October 15, 2018, 6:03 am

日本女优有村千佳COS集锦：狂三&黑白岩&亚丝娜&绫波丽

September 4, 2013, 2:57 am

有遇到过这个问题么。/jsb-videoplayer.js not found, possible missing file.

June 23, 2020, 2:17 am

MAS v2.8 magicgenius 汉化版 - 11.11更新

November 10, 2024, 5:46 pm

出售: Monster Cable Interlink Reference 2

May 23, 2018, 2:00 am

福建佛教人士望云和尚(林斌)的九仙禅寺被强行收走，望云妈妈被赶出寺庙

August 17, 2015, 1:12 am

R 语言中的OpenBLAS*和英特尔® 数学核心函数库的性能比较

December 21, 2016, 9:38 pm

[转载]煞貢、直星、人專吉日\金神七煞歌

March 3, 2016, 6:37 am

HAKERS哈克士戶外 12月8~14日廠拍

December 6, 2016, 3:52 am

OBS Studio 23.2.1 免安裝中文版 - 免費網路實況廣播軟體 實況主必備軟體 取代Fraps

June 16, 2019, 8:10 am

<請教>行駛中安卓機會重新開機

August 5, 2018, 7:25 am

Udp2raw-tunnel 及其一键安装脚本

October 23, 2017, 6:46 pm
Search