温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

css3中怎么制作一个彩色边线3d立体按钮

发布时间:2021-07-22 15:30:17 来源:亿速云 阅读:174 作者:Leah 栏目:web开发

css3中怎么制作一个彩色边线3d立体按钮,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

HTML代码

代码如下:


<button class="blue">
   <div class="wrapper">
     <header>Teach me to fly like Superman and woo Lois Lane</header>
     <div class="data"><em>Superpowers</em> <i class="icon-time"></i> exp: <span>Apr 18, 1938</span></div>
     <p>&pound;80</p>
     <i class="icon-chevron-right"></i>
   </div>
 </button></p> <p>  <button class="green">
   <div class="wrapper">
     <header>Teach me to play ukulele like Israel Kamakawiwo'ole</header>
     <div class="data"><em>Music</em> <i class="icon-time"></i> exp: <span>May 20, 1959</span></div>
     <p>&pound;35</p>
     <i class="icon-chevron-right"></i>
   </div>
 </button></p> <p>  <button class="red">
   <div class="wrapper">
     <header>Teach me to be a javascript ninja like Mr Doob</header>
     <div class="data"><em>Web Development</em> <i class="icon-time"></i> exp: <span>Apr 1, 2010</span></div>
     <p>&pound;60</p>
     <i class="icon-chevron-right"></i>
   </div>
 </button></p> <p>  <button>
   <div class="wrapper">
     <header>Teach me to cook like The Hairy Bikers</header>
     <div class="data"><em>Cooking</em> <i class="icon-time"></i> exp: <span>Jul 07, 2013</span></div>
     <p>&pound;100</p>
     <i class="icon-chevron-right"></i>
   </div>
 </button>

可以看到,HTML代码的结构也非常清楚,没有HTML5的元素,一个button和几个div元素而已。

这里我们定义了4个按钮,就像效果图上一样,每一个按钮都有不同颜色的边线,具体我们会在CSS代码中实现3D效果和边线效果。

接下来是CSS代码,先对所有的button进行统一样式的渲染:

代码如下:


button {
 display: block;
 float: left;
 margin: 0 0 1rem 0;
 padding: 0;
 border: 0;
 height: 5rem;
 width: 25rem;
 border-radius: 0.4rem;
 position: relative;
 background: transparent;
 outline: none;
}</p> <p>button .wrapper {
 display: block;
 float: left;
 background: #fff;
 border: 0;
 height: 5rem;
 width: 25rem;
 border-radius: 0.4rem;
 position: relative;
 box-shadow: inset 0 -0.3rem 0 0 rgba(0, 0, 0, 0.2), 0 0.1rem 0 0 rgba(0, 0, 0, 0.2);
 transition: height 0.08s, margin 0.08s, box-shadow 0.08s, background 0.08s;
 background: -moz-linear-gradient(0deg, #4d4d4d 0%, #4d4d4d 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
 background: -webkit-linear-gradient(0deg, #4d4d4d 0%, #4d4d4d 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
 background: linear-gradient(90deg, #4d4d4d 0%, #4d4d4d 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
}
button .wrapper:hover {
 background: -moz-linear-gradient(0deg, #333333 0%, #333333 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
 background: -webkit-linear-gradient(0deg, #333333 0%, #333333 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
 background: linear-gradient(90deg, #333333 0%, #333333 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
}
button .wrapper:active {
 margin-top: 0.3rem;
 height: 4.7rem;
 box-shadow: none;
}

大家可以看到,所有按钮的基本外观就出来了,包括3D的效果。

然后就是对每个按钮的边线颜色以及鼠标滑过和按钮按下的样式进行定义:

代码如下:


button.blue .wrapper {
 background: -moz-linear-gradient(0deg, #7db2e8 0%, #7db2e8 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
 background: -webkit-linear-gradient(0deg, #7db2e8 0%, #7db2e8 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
 background: linear-gradient(90deg, #7db2e8 0%, #7db2e8 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
}
button.blue .wrapper:hover {
 background: -moz-linear-gradient(0deg, #5299e0 0%, #5299e0 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
 background: -webkit-linear-gradient(0deg, #5299e0 0%, #5299e0 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
 background: linear-gradient(90deg, #5299e0 0%, #5299e0 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
}</p> <p>button.green .wrapper {
 background: -moz-linear-gradient(0deg, #c4e87d 0%, #c4e87d 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
 background: -webkit-linear-gradient(0deg, #c4e87d 0%, #c4e87d 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
 background: linear-gradient(90deg, #c4e87d 0%, #c4e87d 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
}
button.green .wrapper:hover {
 background: -moz-linear-gradient(0deg, #b1e052 0%, #b1e052 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
 background: -webkit-linear-gradient(0deg, #b1e052 0%, #b1e052 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
 background: linear-gradient(90deg, #b1e052 0%, #b1e052 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
}</p> <p>button.red .wrapper {
 background: -moz-linear-gradient(0deg, #e87d7d 0%, #e87d7d 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
 background: -webkit-linear-gradient(0deg, #e87d7d 0%, #e87d7d 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
 background: linear-gradient(90deg, #e87d7d 0%, #e87d7d 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
}
button.red .wrapper:hover {
 background: -moz-linear-gradient(0deg, #e05252 0%, #e05252 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
 background: -webkit-linear-gradient(0deg, #e05252 0%, #e05252 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
 background: linear-gradient(90deg, #e05252 0%, #e05252 2%, #ffffff 2%, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);
}

看完上述内容,你们掌握css3中怎么制作一个彩色边线3d立体按钮的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注亿速云行业资讯频道,感谢各位的阅读!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI