پیشنمایش زنده
کد HTML
<button class="appstore-button">
<svg viewBox="0 0 24 24">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g
id="SVGRepo_tracerCarrier"
stroke-linecap="round"
stroke-linejoin="round"
></g>
<g id="SVGRepo_iconCarrier">
<path
d="M18.71 19.5C17.88 20.74 17 21.95 15.66 21.97C14.32 22 13.89 21.18 12.37 21.18C10.84 21.18 10.37 21.95 9.09997 22C7.78997 22.05 6.79997 20.68 5.95997 19.47C4.24997 17 2.93997 12.45 4.69997 9.39C5.56997 7.87 7.12997 6.91 8.81997 6.88C10.1 6.86 11.32 7.75 12.11 7.75C12.89 7.75 14.37 6.68 15.92 6.84C16.57 6.87 18.39 7.1 19.56 8.82C19.47 8.88 17.39 10.1 17.41 12.63C17.44 15.65 20.06 16.66 20.09 16.67C20.06 16.74 19.67 18.11 18.71 19.5ZM13 3.5C13.73 2.67 14.94 2.04 15.94 2C16.07 3.17 15.6 4.35 14.9 5.19C14.21 6.04 13.07 6.7 11.95 6.61C11.8 5.46 12.36 4.26 13 3.5Z"
></path>
</g>
</svg>
<span class="button-text">
<span class="top-text">Download on the</span>
<span class="bottom-text">App Store</span>
</span>
</button>
کد CSS
.appstore-button {
display: flex;
align-items: center;
justify-content: center;
padding: 10px 12px;
border: 3px solid rgb(189, 189, 189);
background-color: rgb(15, 15, 15);
border-radius: 15px;
gap: 5px;
cursor: pointer;
transition: all 0.3s;
box-shadow: 0px 0px 100px -30px rgb(255, 255, 255);
}
.appstore-button svg {
width: 45px;
}
.appstore-button svg path {
fill: white;
transition: all 0.3s;
}
.button-text {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
color: white;
transition: all 0.3s;
}
.top-text {
font-size: 13px;
font-weight: 600;
}
.bottom-text {
font-size: 24px;
font-weight: 600;
}
.appstore-button:hover {
background-color: rgb(236, 236, 236);
border: 3px solid rgb(138, 138, 138);
}
.appstore-button:hover .button-text {
color: black;
}
.appstore-button:hover svg path {
fill: black;
}