Tailwind cssでホバーアニメーションをしてみた💡

さいしょに

Tailwind cssを学び始めてまだ日が浅く、見た目を整えることができてもホバーアニメーションがなかったら少し寂しいなと思いました。
なので、今回はホバーアニメーションを2つまとめていこうと思います。

ホバーアニメーション①

1つ目はボタンをホバーすると文字の上に線が引かれるホバーアニメーションです。

<!-- styleタグで囲んで指定する -->


<style>

button {
    padding: 20px;
    position: relative;
    color: #fff;
    background-color: #000;
}

button::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    transition: .3s ease-out;
}

button::after {
    top: 50%;
    left: 10px;
    border-top: solid transparent 1px;
}

button:hover::after {
    width: 177px;
    border-color: #fff;
}

</style>


<!-- Tailwind cssで指定する -->

<a href="#">

<button class="mt-5 ml-5 px-15 py-5 relative text-white bg-black after:content-[''] after:absolute after:w-0 after:h-1 after:transition-all after:duration-300 after:ease-out after:top-1/2 after:left-0 after:border-solid after:border-transparent after:border-t hover:after:w-full hover:after:border-white">

 ホバーアニメーション①

</button>

</a>

ホバーアニメーション②

2つ目はボタンをホバーすると文字と文字の間に少し隙間が開き、ボタンの大きさが大きくなるホバーアニメーションです。

<!-- styleタグで囲んで指定する -->


<style>

button {
    padding: 20px;
    color: #fff;
    background-color: #000;
    border-radius: 30px;
    transition: .3s ease-out;
}

button:hover {
    letter-spacing: 0.1rem;
    scale: calc(1.3);
}

</style>


<!-- Tailwind cssで指定する -->

<a href="#">

<button class="mt-5 ml-20 px-15 py-5 text-white bg-black rounded-4xl transition:duration-300 transition ease-out hover:tracking-widest hover:scale-130">

 ホバーアニメーション①

</button>

</a>

さいごに

今回はTailwind cssでホバーアニメーションを指定してみました。
色々なホバーアニメーションができてよかったです。また、わからなくなった時は一度styleタグで囲んでしてしてみるといいなと思いました。