以下是 CSS3动态按钮导航集合特效代码 的示例演示效果:
部分效果截图1:
部分效果截图2:
部分效果截图3:
部分效果截图4:
部分效果截图5:
部分效果截图6:
部分效果截图7:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Animated Buttons with CSS3</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Animated Buttons with CSS3" />
<meta name="keywords" content="css3, transitions, button, animation, hover, effect, icon, call-to-action, active" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style1.css" />
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />
</head>
<body>
<div class="container">
<div class="header">
<span class="right">
<a href="http://www.webiconset.com/" target="_blank">Icons by webiconset.com</a>
<a href="http://www.justbenicestudio.com/studio/websymbols/" target="_blank">Font/Icons by Just Be Nice</a>
<a href="http://tympanus.net/codrops/2011/11/07/animated-buttons-with-css3/"><strong>Back to the Codrops Article</strong></a>
</span>
<div class="clr"></div>
</div>
<h1>Animated Buttons <span>with CSS3 Transitions and Animations</span></h1>
<div class="more">
<ul>
<li class="selected"><a href="index.html">Demo 1</a></li>
<li><a href="index2.html">Demo 2</a></li>
<li><a href="index3.html">Demo 3</a></li>
<li><a href="index4.html">Demo 4</a></li>
<li><a href="index5.html">Demo 5</a></li>
<li><a href="index6.html">Demo 6</a></li>
<li><a href="index7.html">Demo 7</a></li>
</ul>
</div>
<div class="content">
<div class="button-wrapper">
<a href="#" class="a-btn">
<span class="a-btn-slide-text">$29</span>
<img src="images/icons/1.png" alt="Photos" />
<span class="a-btn-text"><small>Available on the Apple</small> App Store</span>
<span class="a-btn-icon-right"><span></span></span>
</a>
<a href="#" class="a-btn">
<span class="a-btn-slide-text">$19</span>
<img src="images/icons/2.png" alt="Maps" />
<span class="a-btn-text"><small>Available on the Apple</small> App Store</span>
<span class="a-btn-icon-right"><span></span></span>
</a>
<a href="#" class="a-btn">
<span class="a-btn-slide-text">$24</span>
<img src="images/icons/3.png" alt="Settings" />
<span class="a-btn-text"><small>Available on the Apple</small> App Store</span>
<span class="a-btn-icon-right"><span></span></span>
</a>
<a href="#" class="a-btn">
<span class="a-btn-slide-text">$39</span>
<img src="images/icons/4.png" alt="Wireless" />
<span class="a-btn-text"><small>Available on the Apple</small> App Store</span>
<span class="a-btn-icon-right"><span></span></span>
</a>
</div>
</div>
</div>
</body>
</html>
HTML代码(index2.html):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Animated Buttons with CSS3</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Animated Buttons with CSS3" />
<meta name="keywords" content="css3, transitions, button, animation, hover, effect, icon, call-to-action, active" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style2.css" />
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />
</head>
<body>
<div class="container">
<div class="header">
<a href="http://tympanus.net/Tutorials/OriginalHoverEffects/"><strong>« Previous Demo: </strong>Original Hover Effects</a>
<span class="right">
<a href="http://www.webiconset.com/" target="_blank">Icons by webiconset.com</a>
<a href="http://www.justbenicestudio.com/studio/websymbols/" target="_blank">Font/Icons by Just Be Nice</a>
<a href="http://tympanus.net/codrops/2011/11/07/animated-buttons-with-css3/"><strong>Back to the Codrops Article</strong></a>
</span>
<div class="clr"></div>
</div>
<h1>Animated Buttons <span>with CSS3 Transitions and Animations</span></h1>
<div class="more">
<ul>
<li><a href="index.html">Demo 1</a></li>
<li class="selected"><a href="index2.html">Demo 2</a></li>
<li><a href="index3.html">Demo 3</a></li>
<li><a href="index4.html">Demo 4</a></li>
<li><a href="index5.html">Demo 5</a></li>
<li><a href="index6.html">Demo 6</a></li>
<li><a href="index7.html">Demo 7</a></li>
</ul>
</div>
<div class="content">
<div class="button-wrapper">
<a href="#" class="a-btn">
<span class="a-btn-slide-text">$29</span>
<img src="images/icons/5.png" alt="Photos" />
<span class="a-btn-text"><small>Register right now &</small> Download</span>
<span class="a-btn-icon-right"><span></span></span>
</a>
<a href="#" class="a-btn">
<span class="a-btn-slide-text">$19</span>
<img src="images/icons/6.png" alt="Maps" />
<span class="a-btn-text"><small>Register right now &</small> Download</span>
<span class="a-btn-icon-right"><span></span></span>
</a>
<a href="#" class="a-btn">
<span class="a-btn-slide-text">$24</span>
<img src="images/icons/7.png" alt="Settings" />
<span class="a-btn-text"><small>Register right now &</small> Download</span>
<span class="a-btn-icon-right"><span></span></span>
</a>
<a href="#" class="a-btn">
<span class="a-btn-slide-text">$39</span>
<img src="images/icons/8.png" alt="Wireless" />
<span class="a-btn-text"><small>Register right now &</small> Download</span>
<span class="a-btn-icon-right"><span></span></span>
</a>
</div>
</div>
</div>
</body>
</html>
CSS代码(demo.css):
/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
html,body{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
input{border:1px solid #b0b0b0;}
address,caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0;}
/* General Demo Style */
body{background:#f9f9f9 url(../images/stucco.png) repeat top left;color:#333;font-family:'Oswald',Arial,sans-serif;font-size:13px;}
.container{position:relative;}
a{color:#fff;text-decoration:none;}
.clr{clear:both;}
.content{position:relative;width:680px;margin:0 auto;}
h1{margin:0px;padding:20px 20px 10px 20px;font-size:34px;color:#333;text-shadow:1px 1px 1px #fff;text-align:left;font-weight:400;text-align:center;}
h1 span{display:block;font-size:14px;font-family:Georgia,serif;font-style:italic;color:#aaa;padding-top:10px;}
/* Header Style */
.header{font-family:'Arial Narrow',Arial,sans-serif;line-height:24px;font-size:11px;background:#000;opacity:0.9;text-transform:uppercase;z-index:9999;position:relative;-moz-box-shadow:1px 0px 2px #000;-webkit-box-shadow:1px 0px 2px #000;box-shadow:1px 0px 2px #000;}
.header a{padding:0px 10px;letter-spacing:1px;color:#ddd;display:block;float:left;}
.header a:hover{color:#fff;}
.header span.right{float:right;}
.header span.right a{float:none;display:inline;}
.more{position:relative;clear:both;font-family:'Arial Narrow',Arial,sans-serif;text-transform:uppercase;font-size:12px;padding:5px 0px 10px;width:372px;margin:0 auto;}
.more ul{display:block;text-align:center;height:30px;}
.more ul li{display:block;padding:4px 2px;float:left;}
.more ul li.selected a,.more ul li.selected a:hover{background:#aaa;color:#fff;text-shadow:none;}
.more ul li a{color:#555;float:left;background:#fff;width:auto;padding:2px 5px;-moz-box-shadow:1px 1px 2px #aaa;-webkit-box-shadow:1px 1px 2px #aaa;box-shadow:1px 1px 2px #aaa;}
.more ul li a:hover{background:#000;color:#fff;}
.button-wrapper{width:320px;margin:0 auto;padding:20px 0;}
.button-wrapper-large{width:500px;margin:0 auto;padding:20px 0;height:80px;}
CSS代码(style1.css):
.a-btn{background:#a9db80;background:-webkit-gradient(linear,left top,left bottom,color-stop(#a9db80,0),color-stop(#96c56f,1));background:-webkit-linear-gradient(top,#a9db80 0%,#96c56f 100%);background:-moz-linear-gradient(top,#a9db80 0%,#96c56f 100%);background:-o-linear-gradient(top,#a9db80 0%,#96c56f 100%);background:linear-gradient(top,#a9db80 0%,#96c56f 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9db80',endColorstr='#96c56f',GradientType=0 );padding-left:90px;padding-right:105px;height:90px;display:inline-block;position:relative;border:1px solid #80ab5d;-webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset,1px 1px 3px rgba(0,0,0,0.2);-moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset,1px 1px 3px rgba(0,0,0,0.2);box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset,1px 1px 3px rgba(0,0,0,0.2);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;float:left;clear:both;margin:10px 0px;overflow:hidden;-webkit-transition:box-shadow 0.3s ease-in-out;-moz-transition:box-shadow 0.3s ease-in-out;-o-transition:box-shadow 0.3s ease-in-out;transition:box-shadow 0.3s ease-in-out;}
.a-btn img{position:absolute;left:15px;top:13px;border:none;-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}
.a-btn .a-btn-slide-text{position:absolute;font-size:36px;top:18px;left:18px;color:#6d954e;opacity:0;text-shadow:0px 1px 1px rgba(255,255,255,0.4);-webkit-transition:opacity 0.2s ease-in-out;-moz-transition:opacity 0.2s ease-in-out;-o-transition:opacity 0.2s ease-in-out;transition:opacity 0.2s ease-in-out;}
.a-btn-text{padding-top:13px;display:block;font-size:30px;text-shadow:0px -1px 1px #80ab5d;}
.a-btn-text small{display:block;font-size:11px;letter-spacing:1px;}
.a-btn-icon-right{position:absolute;right:0px;top:0px;height:100%;width:80px;border-left:1px solid #80ab5d;-webkit-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;-moz-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;}
.a-btn-icon-right span{width:38px;height:38px;opacity:0.7;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;position:absolute;left:50%;top:50%;margin:-20px 0px 0px -20px;border:1px solid rgba(0,0,0,0.5);background:#4e5c50 url(../images/arrow_down.png) no-repeat center center;-webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.3) inset,0px 1px 2px rgba(255,255,255,0.5);-moz-box-shadow:0px 1px 1px rgba(255,255,255,0.3) inset,0px 1px 2px rgba(255,255,255,0.5);box-shadow:0px 1px 1px rgba(255,255,255,0.3) inset,0px 1px 2px rgba(255,255,255,0.5);-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}
.a-btn:hover{-webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset,1px 1px 5px rgba(0,0,0,0.4);-moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset,1px 1px 5px rgba(0,0,0,0.4);box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset,1px 1px 5px rgba(0,0,0,0.4);}
.a-btn:hover img{-webkit-transform:scale(10);-moz-transform:scale(10);-ms-transform:scale(10);-o-transform:scale(10);transform:scale(10);opacity:0;}
.a-btn:hover .a-btn-slide-text,.a-btn:hover .a-btn-icon-right span{opacity:1;}
.a-btn:active{position:relative;top:1px;background:#80ab5d;-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;border-color:#a9db80;}
.a-btn:active .a-btn-icon-right span{-webkit-transform:scale(1.4);-moz-transform:scale(1.4);-ms-transform:scale(1.4);-o-transform:scale(1.4);transform:scale(1.4);}
分享到QQ
分享到微博
微信扫一扫
