CSS

HTMLの書き方

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

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

body内のボタンを表示させたい場所に以下のHTMLを記載します。

<a href="#" class="btn04 bordertop"><span>7-1-21 線から塗に変化（上から下）</span></a>

CSSの書き方

/* ボタン共通設定 */
.btn04 {
	/*線の基点とするためrelativeを指定*/
	position: relative;

	/*ボタンの形状*/
	display:inline-block;
	padding: 10px 30px;
	color:#333;
	border:1px solid #ccc;
	text-decoration: none;
	outline: none;

	/*はみ出す背景色を隠す*/
	overflow: hidden;
}

/*hoverした際のボタンの形状*/
.btn04:hover {
	color:#ccc;
	border-color: transparent;

	/*色の変化を遅らせる*/
	transition-delay: .6s;
}

/*線の設定*/
.btn04 span{
	display: block;
	z-index: 2;
}


/*== 線から塗に変化（上から下） */

/*線の設定*/
.bordertop span::before,
.bordertop span::after {
	content: '';

	/*絶対配置で線の位置を決める*/
	position: absolute;
	width:1px;
	height: 0;

	/*線の形状*/
	background: #333;

	/*アニメーションの設定*/
	transition: all .3s;
}

/*左線*/
.bordertop span::before {
	left:0;
	top:0;
}

/*右線*/
.bordertop span::after {
	right:0;
	top:0;
}

/*hoverをすると線が伸びる*/
.bordertop:hover span::before,
.bordertop:hover span::after {
	height: 100%;
}

/*背景の設定*/
.bordertop::before{
	content: '';

	/*絶対配置で線の位置を決める*/
	position: absolute;
	left: 0;
	top:0;
	z-index: -1;

	/*背景の形状*/
	width: 100%;
	height: 0;
	background:#333;

	/*アニメーションの設定*/
	transition: all .3s;
}

/*hoverをすると背景が伸びる*/
.bordertop:hover::before{
	height: 100%;

	/*0.4秒遅れてアニメーション*/
	transition-delay: .4s;
}