ボタン
-左下⇒右下⇒右上⇒左上⇒左下に枠線が伸びて塗りに-
See the Pen 7-1-27 左下⇒右下⇒右上⇒左上⇒左下に枠線が伸びて塗りに by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.
「Result」内のボタンにカーソルをあわせて動きを確かめてね!
動きを実現する仕組み
CSS でHTML の<a>タグと<span>タグにそれぞれ疑似要素をつけて、線と背景色を描画する。
transition-delay を使い、線⇒背景&テキスト色という変化の順番にアニメーションを遅らせながら出現させる。
HTMLの書き方
- head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/7-1-27.css"> </head>
- body内のボタンを表示させたい場所に以下のHTMLを記載します。
<a href="#" class="btn05 bordercircle2"><span>7-1-27 左下⇒右下⇒右上⇒左上⇒左下に枠線が伸びて塗りに</span></a>
自作のCSS内の書き方
/*--- 線から塗り(共通設定) ---*/
.btn05{
/*線の基点とするためrelativeを指定*/
position: relative;
/*ボタンの形状*/
display: inline-block;
color: #333;
padding: 10px 20px;
background:#eee;
text-decoration: none;
outline: none;
/*アニメーションの指定*/
transition: all .3s;
transition-delay: .7s;/*0.7秒遅れてアニメーション*/
}
/*hoverした際の、ボタンの背景とテキスト色の変更*/
.btn05:hover{
background:#333;
color: #fff;
}
/*線の設定*/
.btn05 span{
display: block;
}
/*横線の設定*/
.btn05::before,
.btn05::after{
content:"";
/*絶対配置で線の位置を決める*/
position: absolute;
/*線の形状*/
width: 0;
height: 1px;
background: #333;
/*アニメーションの指定*/
transition: all 0.2s linear;
}
/*縦線の設定*/
.btn05 span::before,
.btn05 span::after{
content:"";
/*絶対配置で線の位置を決める*/
position: absolute;
/*線の形状*/
width:1px;
height:0;
background: #333;
/*アニメーションの指定*/
transition: all 0.2s linear;
}
/*hoverした際、線が縦横100%伸びる*/
.btn05:hover::before,
.btn05:hover::after{
width: 100%;
}
.btn05:hover span::before,
.btn05:hover span::after{
height: 100%;
}
/*== 左下⇒右下⇒右上⇒左上⇒左下に枠線が伸びて塗りに */
/*左下から右下へ伸びる横線*/
.bordercircle2::after{
left: 0;
bottom: 0;
}
/*右下から上へ伸びる縦線*/
.bordercircle2 span::after{
right: 0;
bottom: 0;
transition-delay: 0.2s;
}
/*右上から左上へ伸びる横線*/
.bordercircle2::before{
right: 0;
top: 0;
transition-delay: 0.4s;
}
/*左上から左下へ伸びる横線*/
.bordercircle2 span::before{
left: 0;
top: 0;
transition-delay: 0.6s;
}
バリエーション
を見る
- 背景が流れる(左から右)
- 背景が流れる(右から左)
- 背景が流れる(上から下)
- 背景が流れる(下から上)
- 背景が流れる(中央から横全体)
- 背景が流れる(中央から縦全体)
- 背景が流れる(中央から外)
- 背景が流れる(斜め)
- くるっと回転(手前に回転)
- くるっと回転(奥に回転)
- クリックしたら波紋が広がる
- 無限に波紋が広がる
- 波紋がふわっと広がる
- 押し込まれる(円が縮小)
- 下に押し込まれる(立体が平面に)
- 右下に押し込まれる(立体が平面に)
- 左下に押し込まれる(立体が平面に)
- 影がついて浮き上がる
- 影が拡がって浮き上がる
- 上に移動し影がついて浮き上がる
- 線から塗りに変化(上から下)
- 線から塗りに変化(下から上)
- 線から塗りに変化(左から右)
- 線から塗りに変化(右から左)
- 線から塗りに変化(中央から外)
- 左上と右下から枠線が伸びて塗りに1
- 左上と右下から枠線が伸びて塗りに2
- グラデーションが流れる
- グラデーションが縮小する
- グラデーションが拡大する
- グラデーション線から塗りに変化する
- 外の線が伸びる
- 少し出ていた線が伸びる
- 下線が伸びて背景に変わる
- 線の上を別の線が伸びる
- 矢印の線がループして伸縮
- 塗りから線に変わる
- 角丸に変わる
- きらっと光る
- 丸がボタンに変形する
- 表示するテキストが切り替わる
- 矢印が右に移動
- 矢印が右に移動して現在地に戻る
- 矢印が回転
- 矢印が右に移動する
- 矢印が右に移動して背景がつく
- 矢印が縮む
「機能」に関わる
動き一覧
基礎から学びたい方へ
Webサイトの動きを実現する仕組みと
準備について基礎から学びたい方は
下記をまず読み、基本を理解してから
コピペしましょう
Webサイトの動きを
実現する仕組みと準備
書籍情報
紙面だからこそできるまとめ方でコードを説明し、
全体を俯瞰して調べることが出来る構成になっています。
もちろん、パーツのサンプルコードもzipでまとめてダウンロードできます。
購入をしてくださった方には特典がありますので是非チェックしてみてください!