HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/7-1-22.css">body内のボタンを表示させたい場所に以下のHTMLを記載します。
<a href="#" class="btn04 borderbottom"><span>7-1-22 線から塗に変化（下から上）</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;
}
/*== 線から塗に変化（下から上）*/
/*線の設定*/
.borderbottom span::before,
.borderbottom span::after {
content: '';
/*絶対配置で線の位置を決める*/
position: absolute;
width:1px;
height: 0;
/*線の形状*/
background: #333;
/*アニメーションの設定*/
transition: all .3s;
}
/*左線*/
.borderbottom span::before {
left:0;
bottom:0;
}
/*右線*/
.borderbottom span::after {
right:0;
bottom:0;
}
/*hoverをすると線が伸びる*/
.borderbottom:hover span::before,
.borderbottom:hover span::after {
height: 100%;
}
/*背景の設定*/
.borderbottom::before{
content: '';
/*絶対配置で線の位置を決める*/
position: absolute;
left: 0;
bottom:0;
z-index: -1;
/*背景の形状*/
width: 100%;
height: 0;
background:#333;
/*アニメーションの設定*/
transition: all .3s;
}
/*hoverをすると背景が伸びる*/
.borderbottom:hover::before{
height: 100%;
/*0.4秒遅れてアニメーション*/
transition-delay: .4s;
}
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;
}
HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/7-1-20.css">body内のボタンを表示させたい場所に以下のHTMLを記載します。
<a href="#" class="float3">7-1-20 上に移動し影がついて浮き上がる</a>
CSSの書き方
/*== 上に移動し影がついて浮き上がる */
/*ボタンの形状*/
.float3{
position:relative;
top:0;
padding:10px 20px;
display: inline-block;
border: 1px solid #ccc;
color: #333;
text-decoration: none;
outline: none;
/*アニメーションの設定*/
transition: all .3s;
}
/*hoverをしたらボックスに影がつき、上に上がる*/
.float3:hover {
top:-3px;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
}
HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/7-1-19.css">body内のボタンを表示させたい場所に以下のHTMLを記載します。
<a href="#" class="float2">7-1-19 影が拡がって浮き上がる</a>
CSSの書き方
/*== 影が拡がって浮き上がる */
/*ボタンの形状*/
.float2{
background: #fff;
border: 1px solid #ccc;
color: #333;
padding:10px 20px;
display: inline-block;
text-decoration: none;
outline: none;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2), 0 0 40px rgba(128, 128, 128, 0.1) ;
/*アニメーションの設定*/
transition: all .3s;
}
/*hoverをしたらボックスの影が拡がり色が濃くなる*/
.float2:hover {
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.4), 0 0 50px rgba(128, 128, 128, 0.1) ;
border-color: transparent;
}
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;
}