背景が流れる(中央から外)

ボタン
-背景が流れる(中央から外)-

デモページを見る

See the Pen 7-1-7 背景が流れる(中央から外) by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.

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

動きを実現する仕組み

CSS のscale を使い、hover 時に背景を中央から外方向に伸ばす。

HTMLの書き方

  1. head終了タグ直前に自作のCSSを読み込みます。
    <link rel="stylesheet" type="text/css" href="css/7-1-7.css">
    </head>
  2. body内のボタンを表示させたい場所に以下のHTMLを記載します。
    <a href="#" class="btn bgcenterout"><span>7-1-7 背景が流れる(中央から外)</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;
}

/*== 背景が流れる(中央から外) */

.bgcenterout:before {
	content: '';
    /*絶対配置で位置を指定*/
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
    /*色や形状*/
	background: #333;
	width: 100%;
	height: 100%;
    /*アニメーション*/
	transition: transform .3s cubic-bezier(0.8, 0, 0.2, 1) 0s;
	transform: scale(0, 0);
	transform-origin:center;
}

/*hoverした際の形状*/
.bgcenterout:hover:before{
	transform:scale(1, 1);
}

バリエーション
を見る

「機能」に関わる
動き一覧

書籍情報

紙面だからこそできるまとめ方でコードを説明し、
全体を俯瞰して調べることが出来る構成になっています。

もちろん、パーツのサンプルコードもzipでまとめてダウンロードできます。
購入をしてくださった方には特典がありますので是非チェックしてみてください!

書籍紙面サンプル

出版社:ソシム株式会社
2021/2/27 発売

書籍紙面サンプル

出版社:ソシム株式会社
2021/7/31 発売

Page
Top