CSS

HTMLの書き方

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

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

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;
}