パーツ番号 04-01-06 ・ CSSのみ

ボーダードローボタン

ホバーで枠線が四辺を一周するように描かれるボタン。WordPressのブランドサイトやポートフォリオの静かな導線に。

hovercss

プレビュー

ソースコード

HTML

<a href="#" class="d04-01-06-btn" onclick="return false;">
          <span class="d04-01-06-edge d04-01-06-top"></span>
          <span class="d04-01-06-edge d04-01-06-right"></span>
          <span class="d04-01-06-edge d04-01-06-bottom"></span>
          <span class="d04-01-06-edge d04-01-06-left"></span>
          コンセプトを見る
        </a>

CSS

.d04-01-06-btn{
          position:relative;
          display:inline-block;
          padding:16px 46px;
          color:#333;
          background:#fafafa;
          font-size:15px;
          font-weight:600;
          letter-spacing:.14em;
          text-decoration:none;
          border:1px solid #ddd;
        }
        .d04-01-06-edge{
          position:absolute;
          background:#333;
          transition:transform .25s ease;
        }
        .d04-01-06-top, .d04-01-06-bottom{
          left:0; width:100%; height:2px;
          transform:scaleX(0);
        }
        .d04-01-06-left, .d04-01-06-right{
          top:0; width:2px; height:100%;
          transform:scaleY(0);
        }
        .d04-01-06-top{ top:-1px; transform-origin:left center; transition-delay:0s; }
        .d04-01-06-right{ right:-1px; transform-origin:top center; transition-delay:.25s; }
        .d04-01-06-bottom{ bottom:-1px; transform-origin:right center; transition-delay:.5s; }
        .d04-01-06-left{ left:-1px; transform-origin:bottom center; transition-delay:.75s; }
        .d04-01-06-btn:hover .d04-01-06-top,
        .d04-01-06-btn:hover .d04-01-06-bottom{
          transform:scaleX(1);
        }
        .d04-01-06-btn:hover .d04-01-06-left,
        .d04-01-06-btn:hover .d04-01-06-right{
          transform:scaleY(1);
        }

クラス名 .d04-01-06 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。