پیشنمایش زنده
کد HTML
<div class="light-button">
<button class="bt">
<div class="light-holder">
<div class="dot"></div>
<div class="light"></div>
</div>
<div class="button-holder">
<svg height="1em" viewBox="0 0 448 512">
<path
d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"
></path>
</svg>
<p>linkedin</p>
</div>
</button>
</div>
کد CSS
.light-button button.bt {
position: relative;
height: 200px;
display: flex;
align-items: flex-end;
outline: none;
background: none;
border: none;
cursor: pointer;
}
.light-button button.bt .button-holder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100px;
width: 100px;
background-color: #0a0a0a;
border-radius: 5px;
color: #0a66c2z;
font-weight: 700;
transition: 300ms;
outline: #0f0f0f 2px solid;
outline-offset: 20;
}
.light-button button.bt .button-holder svg {
height: 50px;
fill: #0f0f0f;
transition: 300ms;
}
.light-button button.bt .light-holder {
position: absolute;
height: 200px;
width: 100px;
display: flex;
flex-direction: column;
align-items: center;
}
.light-button button.bt .light-holder .dot {
position: absolute;
top: 0;
width: 10px;
height: 10px;
background-color: #0a0a0a;
border-radius: 10px;
z-index: 2;
}
.light-button button.bt .light-holder .light {
position: absolute;
top: 0;
width: 200px;
height: 200px;
clip-path: polygon(50% 0%, 25% 100%, 75% 100%);
background: transparent;
}
.light-button button.bt:hover .button-holder svg {
fill: rgba(10, 102, 194, 1);
}
.light-button button.bt:hover .button-holder {
color: rgba(10, 102, 194, 1);
outline: rgba(10, 102, 194, 1) 2px solid;
outline-offset: 2px;
}
.light-button button.bt:hover .light-holder .light {
background: rgb(255, 255, 255);
background: linear-gradient(
180deg,
rgba(10, 102, 194, 1) 0%,
rgba(255, 255, 255, 0) 75%,
rgba(255, 255, 255, 0) 100%
);
}