css3实现的the Sexy Buttons
来源:互联网 发布:php new soapclient 编辑:程序博客网 时间:2024/06/01 10:08
今天做一些用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
- Sexy CSS3 menu
- 用css3实现Social Media Buttons
- How to make sexy buttons with CSS
- CSS3 Gradient Menu Buttons
- CSS3 Gradient Buttons
- 30 个使用 CSS3 制作网页按钮的教程 30 Examples of CSS3 Buttons Tutorials
- 有点sexy的iPhone应用程序
- CSS3按钮导航Dark Navigation Buttons
- HTML5/CSS3 graphic enhancement: buttons, inputs
- Enigma1 THE BIBLE - Lesson2: Buttons
- android studio 里面的sexy editor插件
- 基于 zui.sexy的模态选择器
- Flex程序实现背景贴图的两种方式 Two ways to implement sexy background/border for containers
- [Reserved] Temptation of Adam fashion and sexy interpretation of the
- loading的实现(css3)
- css3立方体的实现
- CSS3六边形的实现
- 编译:cc、gcc、g++、CC的区别概括
- 笔记-2007-基于有效子串标注的中文分词
- 字符串匹配算法的学习及分析
- 主从复制
- QT OpenCV 播放视频
- css3实现的the Sexy Buttons
- DOIT.IM时间管理简介
- php调用.net的WebService传参问题
- VS2005 调用堆栈
- WLC上的无线功率控制
- medusa破解ssh密码
- AudioToolbox之AudioQueue.h(二)Creating and Disposing of Audio Queues
- 当C++遇到IOS应用开发---字符串处理
- 思维训练——益智题