吾淘建站技术教程资讯网

网站地图

当前位置:首页 > 建站教程 > 纯CSS3打造立体质感按钮

纯CSS3打造立体质感按钮

时间:2021-03-31 12:55:05

人气:

编辑:本站作者

标签:

导读: 此CSS3按钮包含5个实例DEMO,自适应宽度,立体感强并带有鼠标滑过效果。开发产品、软件必备素材。演示 案例或 下载 此效果。 CSS3按钮HTML代码: <div id="container_buttons">
<p>
<a href="#" class="a_demo_one
此CSS3按钮包含5个实例DEMO,自适应宽度,立体感强并带有鼠标滑过效果。开发产品、软件必备素材。演示 案例或 下载 此效果。
纯CSS3打造立体质感按钮-吾淘建站
CSS3按钮HTML代码:
<div id="container_buttons">
<p>
<a href="#" class="a_demo_one">
Click me!
</a>
</p>
<p>
<a href="#" class="a_demo_one">
Come on, don't be afraid
</a>
</p>
<p>
<a href="#" class="a_demo_one">
You can make this as wide as you want ;)
</a>
</p>
</div>
CSS3按钮CSS样式代码:

.a_demo_one {
background-color:#3bb3e0;
padding:10px;
position:relative;
font-family: 'Open Sans', sans-serif;
font-size:12px;
text-decoration:none;
color:#fff;
border: solid 1px #186f8f;
background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(44,160,202)),
color-stop(1, rgb(62,184,229))
);
-webkit-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 1px 0px #fff;
-moz-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 1px 0px #fff;
box-shadow: inset 0px 1px 0px #7fd2f1, 0px 1px 0px #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}

.a_demo_one::before {
background-color:#ccd0d5;
content:"";
display:block;
position:absolute;
width:100%;
height:100%;
padding:8px;
left:-8px;
top:-8px;
z-index:-1;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;
-moz-box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;
-o-box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;
box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;
}

.a_demo_one:active {
padding-bottom:9px;
padding-left:10px;
padding-right:10px;
padding-top:11px;
top:1px;
background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
background-image: -o-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
background-image: -moz-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
background-image: -ms-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(62,184,229)),
color-stop(1, rgb(44,160,202))
);
}

温馨提示:以上内容整理于网络,仅供参考,如果对您有帮助,留下您的阅读感言吧!
相关阅读
  • 搭建网站的六个基本步骤流程(教程解说)

    搭建网站的六个基本步骤流程(教程解说)

    现今越来越多的企业开始涉足线上经营,因此,企业网站已经成为一个企业的标配,越来越多的企业和个人开始关注网站建设。上篇文章,小编讲了一些建站前的准备,现在我们就来讲讲建站的..
  • 移动端webapp开发必备知识

    移动端webapp开发必备知识

    移动设备的用户越来越多,每天android手机的激活量都已经超过130万台,所以我们面向移动终端的WebAPP也开始跟进了。本文主要介绍webapp的开发与调试的相关知识和经验,以及给出几..
网友评论
本类排行
相关标签
本类推荐

关于我们 | 联系我们 | 版权声明 | 广告服务 | 网站地图 | 友情链接 | Sitemap | CNZZ

吾淘建站技术教程资讯网 Copyright@ 2020-2030 http://www.5taa.com 备案号:浙ICP备18035339号-16
本站资料均来源互联网收集整理,作品版权归作者所有,如果侵犯了您的版权,请跟我们联系。

关注微信