ぽこっと押せるcssで斜めストライプの影がついたボタンの作り方

こんにちは。ささめまです。

見た目が可愛くて（楽しくて？爽やかで？）マウスオーバーした時もぽこっと引っ込んでちょっと気持ちいいボタンをご紹介します。
（以前制作したT-SITE SHOPPINGのクリスマスキャンペーン特設サイトで使用したボタンです）

＼ コピペでそのまま使えます ／


demo

button


code

<a href="#" class="button_link"><span>button</span></a>
.button_link {
	width: 280px;
	height: 40px;
	text-decoration: none;
	display: block;
	position: relative;
}

.button_link::before {
    content: '';
    width: 100%;
    background: repeating-linear-gradient( 45deg, #fff, #fff 3px, #81d8d0 4px, #81d8d0 9px );
    display: block;
    position: absolute;
    right: -4px;
    bottom: -8px;
    top: 20%;
    transition: all 200ms ease;
}

.button_link span {
	color: #fff;
	font-weight: 600;
	text-align: center;
	background-color: #81d8d0;
	border: 2px solid #fff;
	display: block;
	position: relative;
	transition-property: all;
	transition-duration: 0.5s;
}

.button_link span:hover {
	text-decoration: none;
	transform: translate(4px, 4px);
}

design

影が4px斜めストライプのボタンです。
マウスオーバーまたはタップするとぽこっと引っ込みます。
demoくらいゆっくりめな方がぽこっと押した感が出ますが、もうちょっと早く動かしたい場合は.button_link spanのtransition-durationの数値を調整してください。
ストライプの細さも.button_link::beforeのbackgroundでよしなに。


memo

.button_link spanのposition: relative;がないとストライプの方が上に表示されてしまうので一応つけてます。
（::beforeのz-indexを下げても良いのですが、背景色があるサイトとかだと使いにくいので非推奨です）