پیشنمایش زنده
کد HTML
<button>
<div class="svg-wrapper-1">
<div class="svg-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16"> <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"></path> </svg>
</div>
</div>
<div class="text">Login</div>
</button>
کد CSS
/* credits to uiverse.io/profile/eirikvold */
button {
font-family: inherit;
font-size: 18px;
background: rgb(24,119,240);
background: linear-gradient(90deg, rgba(24,119,240,1) 0%, rgba(29,37,253,1) 50%, rgba(11,9,140,1) 100%);
color: white;
padding: 0.8em 1.2em;
display: grid;
grid-template-columns: auto 0fr;
align-items: center;
border: none;
border-radius: 16px;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
transition: all 0.3s;
}
button:hover {
cursor: pointer;
transform: translateY(-3px);
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);
grid-template-columns: auto 1fr;
}
button:active {
transform: scale(0.95);
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
}
button span {
display: block;
margin-left: 0.4em;
transition: all 0.3s;
}
button svg {
transition: all 0.3s;
}
button .svg-wrapper {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.2);
transition: all 0.3s;
}
button:hover .svg-wrapper {
background-color: rgba(255, 255, 255, 0.5);
margin-right: 0.5em;
animation: bounce 1.2s ease-in-out;
}
.text {
overflow: hidden;
}
@keyframes bounce {
0% {
translate: 0;
}
50% {
translate: 0 -8px;
}
100% {
translate: 0;
}
}