56 lines
1.1 KiB
CSS
56 lines
1.1 KiB
CSS
*{
|
||
/* 初始化 */
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
body{
|
||
/* 100%窗口高度 */
|
||
height: 100vh;
|
||
/* 弹性布局 水平+垂直居中 */
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
/* 渐变背景 */
|
||
background: linear-gradient(200deg,#485563,#29323c);
|
||
}
|
||
.button{
|
||
width: 250px;
|
||
height: 80px;
|
||
border: 2px solid #fff;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border-radius: 10px;
|
||
margin: 15px 0;
|
||
cursor: pointer;
|
||
/* 溢出隐藏 */
|
||
overflow: hidden;
|
||
/* 相对定位 */
|
||
position: relative;
|
||
}
|
||
.button p{
|
||
font-size: 22px;
|
||
font-weight: bold;
|
||
/* 绝对定位 */
|
||
position: absolute;
|
||
/* 动画过渡 */
|
||
transition: 1s;
|
||
}
|
||
.button .back{
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
}
|
||
.button .back span{
|
||
background-color: #fff;
|
||
display: block;
|
||
float: left;
|
||
}
|
||
.button:hover div span{
|
||
/* 通过var函数调用自定义属性--c，设置背景颜色 */
|
||
background-color: var(--c);
|
||
}
|
||
.button:hover p{
|
||
color: #fff;
|
||
} |