按钮模版:btn-light-5
2023年6月20日小于 1 分钟
<div class="container">
<button class="btn-light-5">View Room</button>
</div>
.container {
display: flex;
justify-content: center;
align-items: center;
background: #fff;
width: 100%;
height: 200px;
}
.btn-light-5 {
position: relative;
padding: 16px 28px;
border: none;
color: #fff;
background: linear-gradient(
0deg,
rgba(255, 27, 0, 1) 0%,
rgba(251, 75, 2, 1) 100%
);
cursor: pointer;
}
.btn-light-5:hover {
color: #f0094a;
background: transparent;
box-shadow: none;
}
.btn-light-5:before,
.btn-light-5:after {
content: "";
position: absolute;
top: 0;
right: 0;
height: 2px;
width: 0;
background: #f0094a;
box-shadow: -1px -1px 5px 0px #fff, 7px 7px 20px 0px #0003,
4px 4px 5px 0px #0002;
transition: all 0.3s ease;
}
.btn-light-5:after {
right: inherit;
top: inherit;
left: 0;
bottom: 0;
}
.btn-light-5:hover:before,
.btn-light-5:hover:after {
width: 100%;
transition: all 0.4s ease;
}