请选择 进入手机版 | 继续访问电脑版

3D按钮效果

发表于 09-29 10:12 显示全部楼层 15 222

3D按钮效果

        这次来分享一个3D按钮效果,主要运用css3投影属性制作出具有凸起效果的按钮,然后添加类书写按压下去的样式,主要也是用到了投影属性制造凹陷效果。

    

        上图看看效果:


3D按钮效果.gif


后期有遇到按钮制造效果需求的可以参考,这是源码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>3D按钮效果</title>
<style>
*{padding:0; margin: 0; border: 0; list-style: none;}
body{background:#eee;}
h2{text-align: center; margin-top:60px; color:#333;}
/* 默认样式 */
.btn{
background:#eee; 
width: 100px; 
height:100px; 
border-radius:50%; 
margin:50px auto;
/* 按钮白色高光和外阴影 */
 box-shadow:inset 0 3px 5px rgba(255,255,255,0.5),0 10px 20px rgba(0,0,0,0.3); 
 overflow: hidden; 
cursor: pointer; 
transition:0.2s;
}
.btn_in{
width: 100%; height:100%; 
border-radius:50%; 
overflow: hidden; 
transition:0.5s;
}
.color{
width:10px; 
height:40px; 
background:#ccc; 
border-radius:5px; 
margin:30px auto; 
transition:0.2s;
}

/* 按压样式 */
.btn.active{
/* 按压下去白色反光和外阴影 */
box-shadow:inset 0 -3px 5px rgba(255,255,255,0.5),0 -10px 20px rgba(0,0,0,0.2);
}
.btn.active .btn_in{
/* 按压下去内阴影 */
box-shadow:inset 0 5px 10px rgba(0,0,0,0.3);
}
.btn.active .color{
background:#00d0b0; 
box-shadow:0px 0px 7px #37ffb1;
}
</style>

<script>
window.onload = function(){
var btn = document.getElementById("btn");
btn.onclick = function(){
if(btn.className == "btn"){
btn.className = "btn active";
}else{
btn.className = "btn";
}
}
}

</script>

</head>

<body>


<h2>点击按压</h2>
<div class="btn" id="btn">
<div class="btn_in">
<div class="color"></div>
    </div>
</div>


<h2>按压效果展示</h2>
<div class="btn active">
<div class="btn_in">
<div class="color"></div>
    </div>
</div>





</body>
</html>


回复 使用道具
举报
oygza

发表于 10-24 18:39 显示全部楼层

前排支持!!

回复 支持 反对 使用道具
举报
青果园

发表于 10-24 18:17 显示全部楼层

前排支持!!

回复 支持 反对 使用道具
举报
wengongling

发表于 10-22 14:43 显示全部楼层

给楼主32个赞!!!!!

回复 支持 反对 使用道具
举报
顾唐

发表于 10-20 14:40 显示全部楼层

楼主你好

回复 支持 反对 使用道具
举报
小灸舞

发表于 10-15 04:25 显示全部楼层

回复 支持 反对 使用道具
举报
任天翔

发表于 10-09 23:24 显示全部楼层

回复 支持 反对 使用道具
举报
判断力的救赎

发表于 10-08 06:12 显示全部楼层

必须给个赞!

回复 支持 反对 使用道具
举报
寒雪飘影

发表于 10-06 21:44 显示全部楼层

围观楼主

回复 支持 反对 使用道具
举报
青果园

发表于 10-01 21:15 显示全部楼层

以诚感人者,人亦诚而应。一点回复,敬请笑纳!

回复 支持 反对 使用道具
举报
12下一页

发表新文章
欧水萍

小码哥名师团队

0

学分

1599

学币

1759

积分

小码哥名师团队

Rank: 5Rank: 5

积分
1759
Ta的主页 发消息
精华帖排行榜

精彩推荐

  • 关注小码哥教育