mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
72 lines
No EOL
2 KiB
HTML
72 lines
No EOL
2 KiB
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>
|
|
|
|
<style>
|
|
/* From Uiverse.io by vinodjangid07 - Tags: icon, button, dark, download, hover effect, play-store */
|
|
.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;
|
|
}
|
|
|
|
</style>
|
|
|