mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 13:10:21 +08:00
45 lines
1.3 KiB
HTML
45 lines
1.3 KiB
HTML
<button class="carbutton">
|
|
<div class="caption">Let's Race</div>
|
|
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" class="car"><path d="M355.975 292.25a24.82 24.82 0 1 0 24.82-24.81 24.84 24.84 0 0 0-24.82 24.81zm-253-24.81a24.81 24.81 0 1 1-24.82 24.81 24.84 24.84 0 0 1 24.81-24.81zm-76.67-71.52h67.25l-13.61 49.28 92-50.28h57.36l1.26 34.68 32 14.76 11.74-14.44h15.62l3.16 16c137.56-13 192.61 29.17 192.61 29.17s-7.52 5-25.93 8.39c-3.88 3.31-3.66 14.44-3.66 14.44h24.2v16h-52v-27.48c-1.84.07-4.45.41-7.06.47a40.81 40.81 0 1 0-77.25 23h-204.24a40.81 40.81 0 1 0-77.61-17.67c0 1.24.06 2.46.17 3.67h-36z"></path></svg>
|
|
</button>
|
|
<style>
|
|
/* From Uiverse.io by aadium - Tags: button, car, formula1 */
|
|
.carbutton {
|
|
width: 200px;
|
|
height: 70px;
|
|
padding: 20px;
|
|
background: #212121;
|
|
border: 6px double #e8e8e8;
|
|
transition: 0.2s;
|
|
}
|
|
|
|
.caption {
|
|
color: #e8e8e8;
|
|
font-family: 'Courier New', Courier, monospace;
|
|
font-size: 20px;
|
|
transition: 0.2s;
|
|
}
|
|
|
|
.car {
|
|
fill: #e8e8e8;
|
|
width: 50px;
|
|
height: 50px;
|
|
margin-left: -120px;
|
|
margin-top: -35px;
|
|
transition: 0.2s ease-in-out;
|
|
}
|
|
|
|
.carbutton:not(:hover) .car {
|
|
opacity: 0%;
|
|
transform: translateX(-150px);
|
|
}
|
|
|
|
.carbutton:hover .caption {
|
|
opacity: 0%;
|
|
}
|
|
|
|
.carbutton:focus .car {
|
|
transform: translateX(120px);
|
|
}
|
|
|
|
</style>
|