CSS

 
HTMLの書き方

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

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

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

<a href="#" class="btn bgbottom"><span>7-1-4 背景が流れる（下から上）</span></a>

CSSの書き方

/*== ボタン共通設定 */
.btn{
	/*アニメーションの起点とするためrelativeを指定*/
	position: relative;
	overflow: hidden;

	/*ボタンの形状*/
	text-decoration: none;
	display: inline-block;
	border: 1px solid #555;/* ボーダーの色と太さ */
	padding: 10px 30px;
	text-align: center;
	outline: none;

	/*アニメーションの指定*/   
	transition: ease .2s;
}

/*ボタン内spanの形状*/
.btn span {
	position: relative;
	z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
	color:#333;
}

.btn:hover span{
	color:#fff;
}

/*== 背景が流れる（下から上） */
.bgbottom:before {
	content: '';

	/*絶対配置で位置を指定*/
	position: absolute;
	bottom:0;
	left: 0;
	z-index: 2;

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

	/*アニメーション*/
	transition:.3s cubic-bezier(0.8, 0, 0.2, 1) 0s;
}

/*hoverした際の形状*/
.bgbottom:hover:before{
	height: 100%;	
	background-color: #333;
}