ホバー時に色が反転するボタン
マウスホバー時にテキスト色と背景色を入れ替えるボタンです。選択されていることが分かりやすくなります。
ボタン
Source Code
右上の「コピー」からご利用ください。
コピー
<div class="my-parts">ボタン</div>コピー
.my-parts {
display: inline-block;
padding: .6em 2.5em .6em 2em;
margin: 0 0 1em;
background: #fff;
border: .1875em solid #333;
border-radius: 32px;
color: #333;
font-size: 16px;
cursor: pointer;
position: relative;
}
.my-parts::after {
position: absolute;
content: '\f105';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
top: 50%;
right: .4em;
left: auto;
bottom: auto;
transform: translateY(-50%);
}
.my-parts:hover {
background: #333;
color: #fff;
}
