背景が流れる（斜め） | 動くWebデザインアイディア帳

ボタン
-背景が流れる（斜め）-

デモページを見る

See the Pen 7-1-8 背景が流れる（斜め） by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.

「Result」内のボタンにカーソルをあわせて動きを確かめてね！

動きを実現する仕組み

CSS のskewX で形を傾斜させた背景を、左から右までCSS のアニメーションで移動させる。

HTMLの書き方

head終了タグ直前に自作のCSSを読み込みます。

<link rel="stylesheet" type="text/css" href="css/7-1-8.css">
</head>

body内のボタンを表示させたい場所に以下のHTMLを記載します。

<a href="#" class="btn bgskew"><span>7-1-8 背景が流れる（斜め）</span></a>

自作のCSS内の書き方

/*== ボタン共通設定 */
.btn{
    /*アニメーションの起点とするためrelativeを指定*/
    position: relative;
	overflow: hidden;
    /*ボタンの形状*/
	text-decoration: none;
	display: inline-block;
   	border: 1px solid #555;/* ボーダーの色と太さ */
    padding: 10px 30px;
    text-align: center;
    outline: none;
    /*アニメーションの指定*/   
    transition: ease .2s;
}

/*ボタン内spanの形状*/
.btn span {
	position: relative;
	z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
	color:#333;
}

.btn:hover span{
	color:#fff;
}

/*== 背景が流れる（斜め） */
.bgskew::before {
	content: '';
    /*絶対配置で位置を指定*/
	position: absolute;
	top: 0;
	left: -130%;
    /*色や形状*/
	background:#333;
	width:120%;
	height: 100%;
	transform: skewX(-25deg);
}

/*hoverした時のアニメーション*/
.bgskew:hover::before {
	animation: skewanime .5s forwards;/*アニメーションの名前と速度を定義*/
}

@keyframes skewanime {
	100% {
		left:-10%;/*画面の見えていない左から右へ移動する終了地点*/
	}
}