左下⇒右下⇒右上⇒左上⇒左下に枠線が伸びて塗りに

ボタン
-左下⇒右下⇒右上⇒左上⇒左下に枠線が伸びて塗りに-

デモページを見る

See the Pen 7-1-27 左下⇒右下⇒右上⇒左上⇒左下に枠線が伸びて塗りに by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.

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

動きを実現する仕組み

CSS でHTML の<a>タグと<span>タグにそれぞれ疑似要素をつけて、線と背景色を描画する。
transition-delay を使い、線⇒背景&テキスト色という変化の順番にアニメーションを遅らせながら出現させる。

HTMLの書き方

  1. head終了タグ直前に自作のCSSを読み込みます。
    <link rel="stylesheet" type="text/css" href="css/7-1-27.css">
    </head>
  2. 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;
}

バリエーション
を見る

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

書籍情報

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

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

書籍紙面サンプル

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

書籍紙面サンプル

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

Page
Top