HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/7-1-3.css">body内のボタンを表示させたい場所に以下のHTMLを記載します。
<a href="#" class="btn bgtop"><span>7-1-3 背景が流れる（上から下）</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;
}
/*== 背景が流れる（上から下） */
.bgtop:before {
content: '';
/*絶対配置で位置を指定*/
position: absolute;
top:0;
left: 0;
z-index: 2;
/*色や形状*/
background: #333;/*背景色*/
width: 100%;
height: 0;
/*アニメーション*/
transition:.3s cubic-bezier(0.8, 0, 0.2, 1) 0s;
}
/*hoverした際の形状*/
.bgtop:hover:before{
height: 100%;
background-color: #333;
}
HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/7-1-2.css">body内のボタンを表示させたい場所に以下のHTMLを記載します。
<a href="#" class="btn bgright"><span>7-1-2 背景が流れる（右から左）</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;
}
/*== 背景が流れる（右から左） */
.bgright:before {
content: '';
/*絶対配置で位置を指定*/
position: absolute;
top: 0;
left: 0;
z-index: 2;
/*色や形状*/
background: #333;/*背景色*/
width: 100%;
height: 100%;
/*アニメーション*/
transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
transform: scale(0, 1);
transform-origin: left top;
}
/*hoverした際の形状*/
.bgright:hover:before{
transform-origin:right top;
transform:scale(1, 1);
}
html
<a href="#" class="btn03 pushdown"><span>7-1-15 下に押し込まれる（立体が平面に）</span></a>
css
/* ボタン共通設定 */
.btn03 {
/*影の基点とするためrelativeを指定*/
position: relative;
/*ボタンの形状*/
text-decoration: none;
display: inline-block;
text-align: center;
background: transparent;
border-radius: 25px;
border: solid 1px #333;
outline: none;
/*アニメーションの指定*/
transition: all 0.2s ease;
}
/*hoverをした後のボタンの形状*/
.btn03:hover {
border-color: transparent;
}
/*ボタンの中のテキスト*/
.btn03 span {
position: relative;
z-index: 2;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
/*テキストの形状*/
display: block;
padding: 10px 30px;
background: #fff;
border-radius: 25px;
color: #333;
/*アニメーションの指定*/
transition: all 0.3s ease;
}
/*== 下に押し込まれる（立体が平面に） */
/*影の設定*/
.pushdown:before {
content: "";
/*絶対配置で影の位置を決める*/
position: absolute;
z-index: -1;
top: 4px;
left: 0;
/*影の形状*/
width: 100%;
height: 100%;
border-radius: 25px;
background-color: #333;
}
/*hoverの際にY軸に4pxずらす*/
.pushdown:hover span {
background-color: #333;
color: #fff;
transform: translateY(4px);
}
/*========= レイアウトのためのCSS ===============*/
body {
vertical-align: middle;
padding: 100px 0;
text-align: center;
}
p {
margin: 0 0 10px 0;
}
html
<a href="#" class="btnripple3">7-1-13 波紋がふわっと広がる</a>
css
.btnripple3 {
/*波紋の基点とするためrelativeを指定*/
position: relative;
/*リンクの形状*/
display: inline-block;
margin: 0 10px 20px 10px;
text-decoration: none;
color: #333;
outline: none;
}
/*波形の設定*/
.btnripple3:hover::before {
content: '';
/*絶対配置で波形の位置を決める*/
position: absolute;
left: 30%;
top: 0;
/*波形の形状*/
border: 1px solid #333;
width: 60px;
height: 60px;
border-radius: 50%;
/*はじめは不透明*/
opacity: 1;
/*アニメーションの設定*/
animation: 1s circleanime2 forwards;
}
/*波形が広がるアニメーション*/
@keyframes circleanime2 {
0% {
transform: scale(0);
}
100% {
transform: scale(2);
opacity: 0;
}
}
/*矢印の設定*/
.btnripple3::after {
content: '';
/*絶対配置で矢印の位置を決める*/
position: absolute;
top: 30%;
right: -20px;
/*矢印の形状*/
width: 5px;
height: 5px;
border-top: 1px solid #000;
border-right: 1px solid #000;
transform: rotate(45deg);
}
/*========= レイアウトのためのCSS ===============*/
body {
vertical-align: middle;
padding: 100px 0;
text-align: center;
}
p {
margin: 0 0 10px 0;
}
html
<a href="#" class="btn bgleft"><span>7-1-1 背景が流れる（左から右）</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;
}
/*== 背景が流れる（左から右） */
.bgleft:before {
content: '';
/*絶対配置で位置を指定*/
position: absolute;
top: 0;
left: 0;
z-index: 2;
/*色や形状*/
background: #333;/*背景色*/
width: 100%;
height: 100%;
/*アニメーション*/
transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
transform: scale(0, 1);
transform-origin: right top;
transform-origin: left top; /*右から左の場合はleftにする*/
}
/*hoverした際の形状*/
.bgleft:hover:before {
transform-origin: left top;
transform: scale(1, 1);
}
/*========= レイアウトのためのCSS ===============*/
body {
vertical-align: middle;
padding: 100px 0;
text-align: center;
}
p {
margin: 0 0 10px 0;
}