怎么用css3制作样式好看的按钮?
程序员文章站
2022-04-12 15:14:50
...
本篇文章主要介绍了用css3制作样式好看的按钮,即圆角点击向右滑动按钮功能。希望本文介绍对大家有所帮助。
注:CSS3,CSS 用于控制网页的样式和布局。CSS3 是最新的 CSS 标准。
用css3制作样式好看按钮的具体代码示例如下:
<div class="container fix"> <h1>Animated Buttons <span>with CSS3 Transitions and Animations</span></h1> <div class="content"> <div class="button-wrapper"> <a href="#" class="a-btn"> <span class="a-btn-text">Register now</span> <span class="a-btn-slide-text">It's free!</span> <span class="a-btn-icon-right"><span></span></span> </a> <a href="#" class="a-btn"> <span class="a-btn-text">Become a member</span> <span class="a-btn-slide-text">Sign up!</span> <span class="a-btn-icon-right"><span></span></span> </a> <a href="#" class="a-btn"> <span class="a-btn-text">Enter</span> <span class="a-btn-slide-text">Log in!</span> <span class="a-btn-icon-right"><span></span></span> </a> <a href="#" class="a-btn"> <span class="a-btn-text">Get an account</span> <span class="a-btn-slide-text">For free!</span> <span class="a-btn-icon-right"><span></span></span> </a> </div> </div> </div>
/*style2.css*/ .a-btn{ background:#80a9da; background:-webkit-gradient(linear,left top,left bottom,color-stop(#80a9da,0),color-stop(#6f97c5,1)); background:-webkit-linear-gradient(top, #80a9da 0%, #6f97c5 100%); background:-moz-linear-gradient(top, #80a9da 0%, #6f97c5 100%); background:-o-linear-gradient(top, #80a9da 0%, #6f97c5 100%); background:linear-gradient(top, #80a9da 0%, #6f97c5 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#80a9da', endColorstr='#6f97c5',GradientType=0 ); padding-left:90px; padding-right:105px; height:90px; display:inline-block; position:relative; border:1px solid #5d81ab; -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:#bde086; text-shadow:0px 1px 1px rgba(0,0,0,0.3); -webkit-transform:scale(0); -moz-transform:scale(0); -ms-transform:scale(0); -o-transform:scale(0); transform:scale(0); opacity:0; -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-text{ padding-top:13px; display:block; font-size:30px; text-shadow:0px -1px 1px #5d81ab; } .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 #5d81ab; -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:#5b5b5b 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{ opacity:0; } .a-btn:hover .a-btn-slide-text{ opacity:1; -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); transform:scale(1); } .a-btn:hover .a-btn-icon-right span{ opacity:1; background-color:#bc3532; } .a-btn:active{ position:relative; top:1px; background:#5d81ab; -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:#80a9da; } .a-btn:active .a-btn-icon-right span{ -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -ms-transform:rotate(360deg); -o-transform:rotate(360deg); transform:rotate(360deg); }
【相关内容推荐】
以上就是怎么用css3制作样式好看的按钮?的详细内容,更多请关注其它相关文章!