galaxy/Buttons/AndrewHeinke_pink-lion-94.html

39 lines
1.4 KiB
HTML

<button class="space-btn">
<svg stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M15.59 14.37a6 6 0 01-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 006.16-12.12A14.98 14.98 0 009.631 8.41m5.96 5.96a14.926 14.926 0 01-5.841 2.58m-.119-8.54a6 6 0 00-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 00-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 01-2.448-2.448 14.9 14.9 0 01.06-.312m-2.24 2.39a4.493 4.493 0 00-1.757 4.306 4.493 4.493 0 004.306-1.758M16.5 9a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" stroke-linejoin="round" stroke-linecap="round"></path> </svg>
to infinity
</button>
<style>
/* From Uiverse.io by AndrewHeinke - Tags: button */
.space-btn {
background: #FBFBFF;
border: 2px solid #FF4F00;
color: #363537;
font-size: 1rem;
font-weight: bold;
line-height: 1;
letter-spacing: 1px;
padding: .5rem .75rem;
font-family: monospace;
border-radius: 4px;
display: flex;
align-items: center;
box-shadow: 0 2px 1px rgba(0,0,0,0.09),
0 4px 2px rgba(0,0,0,0.09),
0 8px 4px rgba(0,0,0,0.09),
0 16px 8px rgba(0,0,0,0.09),
0 32px 16px rgba(0,0,0,0.09);
transition: .3s ease-in;
}
.space-btn:hover {
background: #FF4F00;
color: white;
}
.space-btn svg {
width: 1em;
height: 1em;
color: currentColor;
margin-right: .5rem;
}
</style>