カーソルを合わせるとボタンの色が反転するCSS

カーソルを合わせるとボタンの色が反転するCSS

カーソルを合わせるとボタンの色が反転するCSSを実装したのでメモ。

実装イメージ

カーソルを合わせるとボタンの色が反転します

HTML
<a href="#"><div class="prefbtn">カーソルを合わせるとボタンの色が反転します</div></a>
CSS

.prefbtn {
color:#fff;
background-color:#004445;
text-align: center;
padding: 1em;
border:1px solid #fff;
}
.prefbtn a{
color: #004445;
background-color: #fff;
}
.prefbtn:hover {
color: #004445;
background-color: #fff;
outline: 1px solid #004445;
outline-offset: -2px;
}

HTML / CSSカテゴリの最新記事