Howire Hover Button

A.Hotwire Hover Button.md

Hotwire Hover Button as seen on https://turbo.hotwired.dev/handbook/introduction

button.css

.button {
    transition: font-weight 0.1s ease, clip-path 0.2s ease, background-color 0.2s ease;
    display: inline-block;
    padding: 1em 1.5em;
    color: #000;
    font-family: "Jost",sans-serif;
    text-decoration: none;
    text-align: center;
    line-height: normal;
    -webkit-appearance: none;
    background-color: #5cd8e5;
    border: 0;
    box-shadow: none;
    clip-path: polygon(5% 10%, 46% 1%, 46% 10%, 100% 0, 95% 90%, 31% 100%, 31% 90%, 0% 100%);
    font-weight: 550;
}

@media (hover: hover)
.button:hover {
    color: #000;
    background-color: #ffe801;
    cursor: pointer;
    text-decoration: none;
    font-weight: 800;
    clip-path: polygon(5% 10%, 66% 1%, 66% 10%, 100% 0, 95% 90%, 51% 100%, 51% 90%, 0% 100%);
}
  

button.html

<a class="button" href="/handbook/drive">Next: Navigate with Turbo Drive</a>