<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CSS技巧专栏一日一例：21 -纯CSS实现拟真电器按钮特效</title>
<style>
*{
margin:0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
:root{
--main-bg-color: #eaeaea;
--color:#000;
--hover-bg:#fff;
}
body {
width:100%;
height: auto;
background: var(--main-bg-color);
}
button{
outline: 0;
border: none;
}
.container{
/* 居中 */
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width:auto;
}
.base{
position: relative;
padding: 1rem 3rem; /* 用 padding 撑起按钮的宽度和高度 ，并确保了按钮文字水平方向居中 */
font-family: "微软雅黑", sans-serif;
font-size: 1.5rem;
line-height: 1.5rem; /* 行高和字号大小相等，可以实现按钮文字在按钮内垂直居中 */
font-weight:700;
color: var(--color); /* 文字颜色为预定义的前景色 */
cursor: pointer; /* 鼠标移动到按钮上时候的形状：手型 */
user-select: none; /* 让用户不能选择按钮上的文字 */
white-space: nowrap; /* 避免英文单词间的空格导致文字换行 */
border-radius: 2rem;
text-decoration: none;
text-transform:uppercase; /* 字母自动修正为大写 */
transition: all .5s; /* 按钮响应动画效果的持续时间 */
margin: 1.5rem 2rem;
}
/* 时尚按钮 */
.true_button {
background: #ddd;
position: relative;
color: #333;
text-shadow: 2px 2px 1px rgba(255, 255, 255, 0.6);
box-shadow: 0px 0px 15px 0 rgba(0, 0, 0, 0.05), 0px 1px 3px #fff inset;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}
.true_button:before {
display: block;
content: '';
position: absolute;
top: -7px;
left: -7px;
border: 1px solid #ddd;
border-top: 1px solid #ddd;
border-bottom: 1px solid #eee;
border-radius: 2.2rem;
width: calc(100% + 12px);
height: calc(100% + 12px);
background: #555;
box-shadow: 0 0px 15px rgba(0, 0, 0, 0.2),inset 0px 1px 5px #000, 0 -5px 10px #fff;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
z-index: -1;
}
.true_button:hover{
color:#00a3cc;
background: #eee;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6),inset 0px 2px 2px rgba(255, 255, 255, 0.6),inset 0px 0px 4px rgba(0, 222, 255, 0.5);
}
.true_button:hover::before{
background: #00ccff;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
z-index: -1;
}
.true_button:active{
color: #00a3cc;
background: #eee;
text-shadow: 0px 0px 5px rgba(0, 222, 255, 0.3);
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3), 0px -1px 3px rgba(0, 0, 0, 0.3);
transition: all 0.4s ease-out;
}
</style>
</head>
<body>
<div class="container">
<button class="base ">拟真时尚电器按钮</button>
<button class="base true_button" >拟真时尚电器按钮</button>
</div>
</body>
</html>
CSS技巧专栏一日一例：21 -纯CSS实现拟真电器按钮特效.zip （1个子文件） 
CSS技巧专栏一日一例：21 -纯CSS实现拟真电器按钮特效.html 3KB资源评论
鱼仰泳
- 粉丝: 688
- 资源: 48
