پیشنمایش زنده
کد HTML
<button class="button-container">
<div class="b-m-container">
<div class="b-m-text">A-man 2005</div>
<div class="b-m-icon">
<svg viewBox="0 0 24 24" height="100%" width="100%">
<path
d="M5.536 21.886a1.004 1.004 0 0 0 1.033-.064l13-9a1 1 0 0 0 0-1.644l-13-9A.998.998 0 0 0 5 3v18a1 1 0 0 0 .536.886zM7 4.909 17.243 12 19.091V4.909z"
></path>
</svg>
</div>
</div>
</button>
کد CSS
.button-container {
cursor: pointer;
background-color: #dd7109;
border: none;
padding: 13px 30px 13px;
clip-path: polygon(
0% 0%,
64% 0%,
64% 10%,
70% 10%,
75% 1%,
100% 0%,
100% 80%,
95% 100%,
42% 100%,
42% 90%,
34% 90%,
34% 100%,
5% 100%,
0% 80%
);
transition: all 0.3s ease-in-out;
}
.button-container:hover {
background-color: #5c47de;
}
.b-m-container {
display: flex;
align-items: center;
justify-content: center;
-webkit-mask-image: linear-gradient(
-75deg,
rgb(0 0 0) 30%,
#000 50%,
rgba(0, 0, 0, 0.2) 70%
);
-webkit-mask-size: 200%;
animation: shine 2s infinite;
transition: 0.35s;
}
@keyframes shine {
0% {
-webkit-mask-position: 160%;
}
100% {
-webkit-mask-position: -50%;
}
}
.b-m-text {
text-transform: uppercase;
font-size: 20px;
color: #fff;
font-weight: 100;
margin-right: 10px;
font-family: "Franklin Gothic Medium", sans-serif;
}
.b-m-icon {
width: 14px;
height: 14px;
transition: all 0.3s ease-in-out;
display: flex;
align-items: center;
justify-content: center;
}
.b-m-icon svg {
fill: #fff;
}