css3实现的the Sexy Buttons

今天做一些用css3实现的the Sexy Buttons

源代码下载地址：http://download.csdn.net/my/uploads/1

html代码如下：

<h1>Sexy CSS Buttons</h1>
    <a class="fancy_button" href="#"><b>Normal</b></a>
    <a class="fancy_button hover" href="#"><b>Hover</b></a>
    <a class="fancy_button active" href="#"><b>Active</b></a>

css代码如下：

body, html {
   padding: 0;
   margin: 0;
}
body {
   font: 16px/1.5 sans-serif;
   background: #333;
   text-align: center;
}
h1 {
   font-size: 1.5em;
   text-align: center;
   color: #aaa;
}
div {
   display: block;
   width: 100%;
   background: #000;
   padding: 0.5em 0;
   color: #fff;
   font-size: 0.8em;
}
div a {
   color: #f22;
   text-decoration: none;
}
div a:hover {
   border-bottom: 1px dotted;
}
.fancy_button {
   background: #01b12e;
   color: white;
   margin: 0 1em 0 0;
   font: 21px/1em Arial;
   text-decoration: none;
}
.fancy_button {
   display:inline-block;
   position:relative;
   padding:0.25em 2em;
   border:1px solid;
   border-color:transparent transparent rgba(202,202,202,0.27) transparent;
   -webkit-border-radius:7px;
   -moz-border-radius:7px;
   border-radius:7px;
   -webkit-background-clip:padding-box;
}
.fancy_button b {
   display:block;
   z-index:2;
   position:relative;
   text-shadow:rgba(0,0,0,0.45) 0 -1px 0;
}
.fancy_button:before, .fancy_button:after {
   position:absolute;
   width:100%;
   height:100%;
   content:"";
   display:block;
   -webkit-background-clip:padding-box;
}
.fancy_button:before {
   top:-4px;
   left:-4px;
   padding:4px;
   background:#086f14;
   background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.4)), to(rgba(77,77,77,0.4)));
   background: -moz-linear-gradient(top, rgba(0,0,0,0.4), rgba(77,77,77,0.4));
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
}
.fancy_button:after {
   top:0;
   left:0;
   border:1px solid;
   border-color: rgba(255,255,255,0.7) rgba(0,0,0,0.3) rgba(0,0,0,0.6) rgba(0,0,0,0.3);
   box-shadow: rgba(0,0,0,0.75) 0px 0px 3px;
   border-radius: 7px;
   background:transparent -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.6)), color-stop(0.5, rgba(255,255,255,0.15)),

color-stop(0.5, rgba(255,255,255,0.01)), to(transparent));
background:transparent -moz-linear-gradient(top, rgba(255,255,255,0.6),

rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.01) 50%, transparent);
}
.fancy_button:hover:after, .fancy_button.hover:after {
border-top-color:rgba(255,255,255,0.65);
background:-webkit-gradient(linear, left top, left bottom, from(rgba(220,220,220,0.6)),

color-stop(0.5, rgba(100,100,100,0.2)), color-stop(0.5, rgba(0,0,0,0.21)), to(rgba(0,0,0,0.20)));
background:-moz-linear-gradient(top, rgba(220,220,220,0.6), rgba(100,100,100,0.2) 50%,

rgba(0,0,0,0.21) 50%, rgba(0,0,0,0.20));
}
.fancy_button:active:after, .fancy_button.active:after {
   border-top-color:rgba(255,255,255,0.2);
   border-left-color:rgba(0,0,0,0.4);
   background:-webkit-gradient(linear, left top, left bottom, from(rgba(150,150,150,0.6)),

color-stop(0.5, rgba(60,60,60,0.6)), color-stop(0.5, rgba(40,40,40,0.6)), to(rgba(0,0,0,0.2)));
background:-moz-linear-gradient(top, rgba(150,150,150,0.6), rgba(60,60,60,0.6) 50%, rgba(40,40,40,0.6) 50%,

rgba(20,20,20,0.5));
box-shadow: inset 0 0 18px rgba(0,0,0,0.75), rgba(0,0,0,0.75) 0px 0px 3px;
}

预览效果如下图：

css3实现的the Sexy Buttons相关推荐

用css3实现Social Media Buttons
以前实现按钮一般都是用图片来实现的,特别是一些拥有质感的按钮,今天练习了一些相关方面的的例子,用css3来实现Social Media Buttons html代码如下 <div class=& ...
推荐12个漂亮的 CSS3 按钮实现方案
在过去,我们都是使用图片或者JavaScript来实现漂亮的按钮效果,随着越来越多的浏览器对CSS3的支持和完善,使用CSS3来实现美观的按钮已没有太多的障碍.今天,本文收集了12个很不错的CSS3按 ...
12个漂亮的 CSS3 按钮实现方案
在过去,我们都是使用图片或者JavaScript来实现漂亮的按钮效果,随着越来越多的浏览器对CSS3的支持和完善,使用CSS3来实现美观的按钮已没有太多的障碍.今天,本文收集了12个很不错的CSS3按 ...
从Google代码库找到的好东西
Google 代码库是一个类似 SourceForge 的开源社区,大量开发者在那里上传自己的代码或素材同他人分享,Google 代码库于 2006 年启动,至今已积累了大量的好东西,本文从 Goog ...
从 Google 代码库找到的好东西 [转]
Google 代码库是一个类似 SourceForge 的开源社区,大量开发者在那里上传自己的代码或素材同他人分享,Google 代码库于 2006 年启动,至今已积累了大量的好东西,本文从 Goog ...
【翻译】怎样使用css制作迷人的button
英文原文:How to make sexy buttons with css 作者:Alex 这是一个教程,作者Alex一步步地叫我们怎样使用css来制作一个迷人的按钮,看后觉得挺好,很想大家都看看, ...
30个优秀的CSS导航菜单和按钮教程
在web设计中,CSS是最重要的组成部分.为了让大家更好的了解如何通过CSS来设计,下面就分享30个优秀的CSS导航菜单和按钮.通过这些教程,你可以更好的从中学习.enjoy! 01. Advance ...
20个很酷的CSS3导航菜单制作教程
CSS3 是对 CSS 规范的一个很大的改善和增强,它使得 Web 开发人员可以很容易的在网站中加入时尚的效果.以前很多需要编写 JavaScript 才能实现的效果,如今只需要简单的写几句 CSS3 ...
24个为Web开发人员准备的CSS3实用教程
本文搜集了一些关于CSS3的最新教程.你可以根据这些教程或技术来实现网页设计,包括:文字阴影.圆角框.盒模型尺寸计算(box sizing).透明效果处理.多重背景.边框图像等.以下这些都是非常实用的 ...

css3实现的the Sexy Buttons

css3实现的the Sexy Buttons相关推荐

最新文章

热门文章