2020年12月25日

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

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

表示例

aタグのボタン

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;
}

補足

background-position: 0 5%;
この「5%」の値を増やすと、初期表示の下線の幅を調整できます。

background-image: linear-gradient(to top, #343535 50%, rgba(0,0,0,0) 50% );
背景の色はこの「#343535」を変更することで調整できます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です