はじめに
こんにちは。Qiita株式会社で主にQiita Zineの記事制作を担当しています。非エンジニアです。記事やサイトは見るのも作るのも好きで、そこからHTMLやCSSに興味を持って調べるなどして、少し勉強しています。
「遷移ボタンを作るコードの仕組みを知る（前編）」を書いていまして、こちらはその続きです。
Chat GPTに教えてもらったコードを一部変更したもの
<html>
<head>
<style>
/* スタイルの設定 */
.transition-button {
display: inline-block;
padding: 10px 20px;
background-color: #00ced1;
color: #fff;
text-decoration: none;
border-radius: 4px;
transition: background-color 0.3s ease;
}
.transition-button:hover {
background-color: #333;
}
</style>
</head>
<body>
<!-- ボタンの表示 -->
<a href="遷移先のURL" class="transition-button">PUSH！</a>
</body>
</html>
前回はdisplay padding と色の指定まで調べました。
上記コードでの見え方は▼
text-decorationで文字を装飾
text-decorationは何でしょう。言葉通り「テキスト」を「デコレーション（装飾する）」のだと想像はつきますが、一体どのような役割かは分かりません。調べると、アンダーラインを引いたり、その色を変えたり、波形など形を指定したりするプロパティのようです。
text-decorationには-color -line color style などを続けて書くこともあり、それぞれ色、線を引く位置、色、線のスタイル（直線、波形、二重線など）を指定できます。
いくつか試してみました。
■text-decoration-style: wavy;：波形にする
■text-decoration-style: dashed;：点線にする
■text-decoration-style: wavy;とbackground-color: #00008b;：波形にして、線の色を #00008bにする
簡潔にまとめてくださっている記事があったので、貼っておきます。
border-radiusは要素の四角を丸めるショートハンドプロパティ
border-radiusは、要素の4つの角を丸めるプロパティらしいです。今回は 4px と指定されているので、差が分かるようborder-radius: 70px;に変更してみます。丸みが強くなりました。
四角それぞれの指定も可能
■border-top-right-radius：右上
■border-top-left-radius：左上
■border-bottom-right-radius：右下
■border-bottom-left-radius：左下
ちなみに↑のように、四角それぞれの指定もできます。border-radiusは四角すべて一括で指定しています。せっかくなので、四角異なるピクセルで指定してみます。
border-top-right-radius: 50px;
border-top-left-radius: 10px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 30px;
自由自在にいびつな形を作れます。
transitionで簡単なアニメーションを
transition: background-color 0.3s ease; と.transition-button:hover〜をまとめて説明。
transition は簡単に言うと、スタイルの開始から終了までの動きを指定するショートハンドプロパティのようです。今回ですと、カーソルをボタンに合わせると、（後述しますが）0.3秒かけて黒色 #333に変化します。
解説
今回設定している ease は、最初と最後がゆっくりと変化することを意味しています。0.3sは0.3秒。sはsecond（秒）の頭文字ですね。大袈裟に、例えば10sに変更すると、色が #00ced1 から #333 に変化するまで、非常に長かった（10秒）。
easeの応用として、 ease-in ease-outなどがあり、それぞれ「最初はゆっくりと、徐々に速く」「最初が速く、徐々にゆっくりと」した動きを設定できます。
.transition-button:hover
:hoverは擬似クラス（特定の状態のときのみ実行されるクラス）の一つ。：hoverは、要素にマウスのポインタが置かれたときのみ適用されます。
.transition-button:hover {
background-color: #333;
}
は、「ボタンにマウスのポインタが乗っている場合（.transition-button:hover）、背景色が#333になりますよ」という意味です。ただ#00ced1から#333に変化するのは違和感あったので、#20b2aaに変更。
マウスを乗せると...
よくありそうな、色が濃くなるような設定にしました。画像比較では少々分かりづらいかもしれませんが。
表示するテキストとリンクの設定
最後は<body>の部分。
<body>
<!-- ボタンの表示 -->
<a href="遷移先のURL" class="transition-button">PUSH！</a>
</body>
class="transition-button"は、これまで解説してきたクラス.transition-buttonの設定を適用する指定。class="transition-button"を消すと、ただのテキストになります（下の画像）。
遷移先のURLには文字通り、遷移させたいURLを、「PUSH！」 にはボタンに表示させたいテキストを記載します。
おわり
今まではネットで紹介されているコードをコピペして使うことが多く、仕組みはよく知らないままでしたが、今回調べてみると少しですが分かりました。