影がついて浮き上がる | 動くWebデザインアイディア帳

ボタン
-影がついて浮き上がる-

デモページを見る

See the Pen 7-1-18 影がついて浮き上がる by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.

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

動きを実現する仕組み

CSS のbox-shadow を使い、ボタンをhover したら影を拡げて浮き上がりを表現する。

HTMLの書き方

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

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

body内のボタンを表示させたい場所に以下のHTMLを記載します。
```
<a href="#" class="float1">7-1-18 影がついて浮き上がる</a>
```

自作のCSS内の書き方

/*== 影がついて浮き上がる */

/*ボタンの形状*/
.float1{
    border: 1px solid #ccc;
    color: #333;
    padding:10px 20px;
    display: inline-block;
    text-decoration: none; 
    outline: none;
    /*アニメーションの指定*/
    transition: all .3s;
}

/*hoverをしたらボックスに影がつく*/
.float1:hover {
  box-shadow: 0 7px 10px rgba(0, 0, 0, 0.3);
  border-color: transparent;
}