HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/7-1-8.css">body内のボタンを表示させたい場所に以下のHTMLを記載します。
<a href="#" class="btn bgskew"><span>7-1-8 背景が流れる（斜め）</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;
}
/*== 背景が流れる（斜め） */
.bgskew::before {
content: '';
/*絶対配置で位置を指定*/
position: absolute;
top: 0;
left: -130%;
/*色や形状*/
background:#333;
width:120%;
height: 100%;
transform: skewX(-25deg);
}
/*hoverした時のアニメーション*/
.bgskew:hover::before {
animation: skewanime .5s forwards;/*アニメーションの名前と速度を定義*/
}
@keyframes skewanime {
100% {
left:-10%;/*画面の見えていない左から右へ移動する終了地点*/
}
}
HTMLの書き方
1.head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/7-1-7.css">2.body内のボタンを表示させたい場所に以下のHTMLを記載します。
<a href="#" class="btn bgcenterout"><span>7-1-7 背景が流れる（中央から外）</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;
}
/*== 背景が流れる（中央から外） */
.bgcenterout:before {
content: '';
/*絶対配置で位置を指定*/
position: absolute;
top: 0;
left: 0;
z-index: 2;
/*色や形状*/
background: #333;
width: 100%;
height: 100%;
/*アニメーション*/
transition: transform .3s cubic-bezier(0.8, 0, 0.2, 1) 0s;
transform: scale(0, 0);
transform-origin:center;
}
/*hoverした際の形状*/
.bgcenterout:hover:before{
transform:scale(1, 1);
}
HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<a href="#" class="btn bgcenterx"><span>7-1-5 背景が流れる（中央から横全<link rel="stylesheet" type="text/css" href="css/7-1-6.css">body内のボタンを表示させたい場所に以下のHTMLを記載します。
<a href="#" class="btn bgcentery"><span>7-1-6 背景が流れる（中央から縦全体）</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;
}
/*== 背景が流れる（中央から縦全体） */
.bgcentery:before {
content: '';
/*絶対配置で位置を指定*/
position: absolute;
top: 0;
left: 0;
z-index: 2;
/*色や形状*/
background: #333;
width: 100%;
height: 100%;
/*アニメーション*/
transition: transform .3s cubic-bezier(0.8, 0, 0.2, 1) 0s;
transform: scale(1, 0);
transform-origin:center;
}
/*hoverした際の形状*/
.bgcentery:hover:before{
transform:scale(1, 1);
}
HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/7-1-5.css">body内のボタンを表示させたい場所に以下のHTMLを記載します。
<a href="#" class="btn bgcenterx"><span>7-1-5 背景が流れる（中央から横全体）</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;
}
/*== 背景が流れる（中央から横全体） */
.bgcenterx:before {
content: '';
/*絶対配置で位置を指定*/
position: absolute;
top: 0;
left: 0;
z-index: 2;
/*色や形状*/
background: #333;
width: 100%;
height: 100%;
/*アニメーション*/
transition: transform .3s cubic-bezier(0.8, 0, 0.2, 1) 0s;
transform: scale(0, 1);
transform-origin: top;
}
/*hoverした際の形状*/
.bgcenterx:hover:before{
transform:scale(1, 1);
}
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;
}