css ボタン hover で色を変える

css ボタン hover で色を変える

css の単純なボタンが欲しくなることはよくあります。

角の丸い枠の中にテキストを入れるタイプのものです。

例えば、こんなやつ

これ、書き方をちょっと間違えるとはまります(笑）

HTML側のソースは、こうなっています。

<a href="#01" rel="noopener"><button type="button" class="cmbtn">こんなボタン</button></a>

<style>

.cmbtn{

text-align:center;

padding: 1rem 2rem;

background: #66d4f0;

border-radius: 3rem;

color: #fff;

box-shadow: 2px 2px 1px rgba(0, 0, 0, .3);

text-shadow: 2px 2px 3px rgba(0, 0, 0, .3);

width:250px;

margin:5px;

}

.cmbtn:hover{

background: #F0F7FF;

color:#262161;

}

</style>

つまり a タグが入ってから button タグの順番。

これを逆にすると

<button type="button" class="cmbtn"><a href="#01" rel="noopener">こんなボタン</a></button>

リンクテキストの色を制御できません。（白くなっていない）

a.cmbtn で color:#fff; で見た目は白くなりますが、今度はHoverでテキストリンクの色が変わりません。

a:hove で無理やり変えてやろうとすると、テキストリンク部分にマウスが重なるとテキストリンクだけ色が変わります。

よく考えれば、当然なのですけど、a タグの中の要素なのか、外の要素なのかでできることもできなくなる。

制御したい場合には、Aタグでボタンのフレームをくくると覚えておくといいですね。