返回
心录历程
首页
鼠标悬浮时按钮向左拉开的CSS3动态按钮效果
2013-08-17 12:52:32 -0400
此代码
仅
供
参
考
代码说明
CSS3仿Flash动画按钮效果,会动的下载按钮,鼠标放上后按钮向左拉开,像抽屉一样,按钮文字会自动被压缩,拉开后显示出其它信息,特别适合做下载的网站使用。
html代码
<style> @charset "utf-8"; #wrap { width:100%; margin:auto; } #btn-wrap { position:relative; padding:5px; margin:0 auto; width:230px; height:50px; display:block; text-decoration:none; margin-bottom:30px; background: #242428; background: -webkit-gradient(linear, 0 bottom, 0 top, from(#2d2d30 ), to(#17171a)); background: -moz-linear-gradient(-90deg, #17171a, #2d2d30 ); -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; -webkit-box-shadow: 0 1px 0 #37373b; -moz-box-shadow: 0 1px 0 #37373b; box-shadow: 0 1px 0 #37373b; } span.title{ color:yellow; font:30px/58px "BebasNeueRegular", Helvetica, Arial, sans-serif; height:50px; width:230px; display:block; position:relative; -webkit-box-shadow: 0 -1px 0 #8d8d94, 0 1px 1px #0b0b0c; -moz-box-shadow: 0 -1px 0 #8d8d94, 0 1px 1px #0b0b0c; box-shadow: 0 -1px 0 #8d8d94, 0 1px 1px #0b0b0c; background: #52525c; background: -webkit-gradient(linear, 0 bottom, 0 top, from(#383840 ), to(#5a5a64)); background: -moz-linear-gradient(-90deg, #5a5a64, #383840 ); -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; z-index:5; -webkit-transition:width .2s ease-out; -moz-transition:width .2s ease-out; -o-transition:width .2s ease-out; } #btn-wrap:hover span.title { font-size:19px; width:135px; } #info { position:absolute; height:50px; width:230px; top:5px; right:4px; -webkit-box-shadow: 0 -1px 0 #404042, 0 1px 1px #0b0b0c; -moz-box-shadow: 0 -1px 0 #404042, 0 1px 1px #0b0b0c; box-shadow: 0 -1px 0 #404042, 0 1px 1px #0b0b0c; background: #2a2a2d; background: -webkit-gradient(linear, 0 bottom, 0 top, from(#212124 ), to(#2a2a2d)); background: -moz-linear-gradient(-90deg, #2a2a2d, #212124 ); -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; z-index:4; } #info p{ width:65px; margin:12px 17px 0 0; position:absolute; right:0; color:yellow; font:11px/12px Helvetica, Arial, sans-serif; text-align:left; } #info span{ color:#fff; } </style> <div id="wrap"> <a onclick="location.href='http://tzs.wodemo.com';"id="btn-wrap"> <span class="title">欢迎光临</span> <div id="info"><p><strong>网页代码</strong><br/><span>欢迎进入</span></p></div></a></div>
代码演示
欢迎光临
网页代码
欢迎进入
【本站仅供参考,版权归原作者所有】
«Newer
Older»
Comment:
Name:
Back to home
Subscribe
|
Register
|
Login
|
N