HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/7-1-19.css">body内のボタンを表示させたい場所に以下のHTMLを記載します。
<a href="#" class="float2">7-1-19 影が拡がって浮き上がる</a>
CSSの書き方
/*== 影が拡がって浮き上がる */
/*ボタンの形状*/
.float2{
background: #fff;
border: 1px solid #ccc;
color: #333;
padding:10px 20px;
display: inline-block;
text-decoration: none;
outline: none;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2), 0 0 40px rgba(128, 128, 128, 0.1) ;
/*アニメーションの設定*/
transition: all .3s;
}
/*hoverをしたらボックスの影が拡がり色が濃くなる*/
.float2:hover {
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.4), 0 0 50px rgba(128, 128, 128, 0.1) ;
border-color: transparent;
}