پیشنمایش زنده
کد 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>
کد CSS
.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);
}