オンマウスで下から上に背景色がスライドする演出をaタグやinputのボタンに適用するCSS

2020年12月25日

オンマウスで下から上に背景色がスライドする演出をaタグやinputのボタンに適用するCSS

CSSで表現できることが増えて、CSSだけで出来るボタンの演出バリエーションも増えてきましたよね。今回は初期表示では下線のみ、オンマウスで下から上に背景色がスライドする演出のボタンを作成しました。

表示例

HTML／CSS

HTML

ボタン

CSS

.btn_background{
	border: none;
	background: none;
	cursor: pointer;
	display: inline-block;
	background-image: linear-gradient(to top, #343535 50%, rgba(0,0,0,0) 50% );
	background-position: 0 5%;
	background-size: auto 200%;
	transition: all .3s ease 0s;
	text-decoration: none;
/* ↓↓input用にデフォルトスタイルを無効化する記述↓↓ */
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border-radius: 0;
}

.btn_background:hover{
	cursor: pointer;
	background-position: 0 100%;
	color: #fff;
}