按钮模版:btn-dark-2
2023年5月19日小于 1 分钟
<div class="container">
<button class="btn-dark-2"><span>View Room</span></button>
</div>
.container {
display: flex;
justify-content: center;
align-items: center;
background: #000;
width: 100%;
height: 200px;
}
.btn-dark-2 {
border: none;
cursor: pointer;
position: relative;
padding: 16px 28px;
border-radius: 8px;
background: linear-gradient(45deg, #feac5e, #c779d0, #4bc0c8);
}
.btn-dark-2 span {
position: relative;
color: #fff;
z-index: 9;
}
.btn-dark-2::before {
content: "";
position: absolute;
inset: 1px;
background: #272727;
border-radius: 7px;
transition: 0.3s;
}
.btn-dark-2:hover::before {
opacity: 0.6;
}
.btn-dark-2::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(45deg, #feac5e, #c779d0, #4bc0c8);
border-radius: 7px;
filter: blur(12px);
opacity: 0;
transition: 0.3s;
}
.btn-dark-2:hover::after {
opacity: 1;
}