COWAZA

• html/css

• 2020.05.12

リンクをほわっとするhtml/css

リンクのボタンにカーソルをあわせたときにほわっとするhtml/cssです。

ボタンをほわっとするサンプル

まずサンプルです。このようなボタンです。

マウスカーソルを合わせると、ほわっと色が変わります。

サンプルソース HTML

<div class="hover_test">ボタン</div>

サンプルソースCSS

div.hover_test{
 transition: background-color 0.3s ease;
 background-color: #222;
 height: 50px;
 width: 250px;
 margin: auto;
 display: flex;
 justify-content: center;
 align-items: center;
 color: #fff;
 font-weight: bold;
 cursor: pointer;
}
div.hover_test:hover{
 background-color: #f00;
}