HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/7-1-37.css">body内のボタンを表示させたい場所に以下のHTMLを記載します。
<a href="#" class="btnlinestretches5"><span>7-1-37 矢印の線がループして伸縮</span></a>
CSSの書き方
/*== 矢印の線がループして伸縮 */
.btnlinestretches5{
/*線の基点とするためrelativeを指定*/
position:relative;
/*リンクの形状*/
color:#333;
padding: 10px 0;
display:inline-block;
text-decoration: none;
outline: none;
}
/*線の設定*/
.btnlinestretches5::before {
content: "";
/*絶対配置で線の位置を決める*/
position: absolute;
bottom: 0;
/*線の形状*/
width: 100%;
height: 1px;
background: #333;
}
/*矢印の設定*/
.btnlinestretches5::after {
content: "";
/*絶対配置で線の位置を決める*/
position: absolute;
bottom:-4px;
/*矢印の形状*/
width: 8px;
height: 8px;
border-top: 1px solid #333;
border-right: 1px solid #333;
transform: rotate(45deg);
}
/*線と矢印を繰り返しアニメーション*/
.btnlinestretches5::before {
animation: arrowlong01 2s ease infinite;
}
.btnlinestretches5::after {
animation: arrowlong02 2s ease infinite;
}
@keyframes arrowlong01{
0%{
width:0;opacity:0
}
20%{
width:0;opacity:1
}
80%{
width:105%;opacity:1
}
100%{
width:105%;opacity:0
}
}
@keyframes arrowlong02{
0%{
left:0;opacity:0
}
20%{
left:0;opacity:1
}
80%{
left:103%;opacity:1
}
100%{
left:103%;opacity:0
}
}
HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/7-1-36.css">body内のボタンを表示させたい場所に以下のHTMLを記載します。
<a href="#" class="btnlinestretches4"><span>7-1-36 線の上を別の線が伸びる</span></a>
CSSの書き方
/*== 線の上を別の線が伸びる */
.btnlinestretches4{
/*線の基点とするためrelativeを指定*/
position:relative;
/*リンクの形状*/
color:#333;
padding: 10px 50px 10px 30px;
display:inline-block;
text-decoration: none;
outline: none;
}
/*線の設定*/
.btnlinestretches4::before,
.btnlinestretches4::after{
content:'';
/*絶対配置で線の位置を決める*/
position:absolute;
z-index:1;
bottom:0;
left:0;
/*線の形状*/
background:#333;
width:100%;
height:2px;
/*アニメーションの指定*/
transition:all 0.3s ease-in-out;
}
/*hover時に伸びる線の形状*/
.btnlinestretches4::after{
width:0;
background:#ccc;
}
/*hover時に100%に伸びる*/
.btnlinestretches4:hover::after {
width:100%;
}
/*矢印の設定*/
.btnlinestretches4 span::after {
content: '';
/*絶対配置で矢印の位置を決める*/
position: absolute;
top: 1.3em;
right: 20px;
/*矢印の形状*/
width: 5px;
height: 5px;
border-top: 1px solid #000;
border-right: 1px solid #000;
transform: rotate(45deg);
/*アニメーションの指定*/
transition: all .3s;
}
/*hover時に矢印が移動*/
.btnlinestretches4:hover span::after {
right:15px;
}
HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/7-1-35.css">body内のボタンを表示させたい場所に以下のHTMLを記載します。
<a href="#" class="btnlinestretches3"><span>7-1-35 下線が伸びて背景に変わる</span></a>
CSSの書き方
/*== 下線が伸びて背景に変わる */
.btnlinestretches3{
/*線の基点とするためrelativeを指定*/
position:relative;
/*ボタンの形状*/
color:#333;
padding: 10px 30px;
display:inline-block;
text-decoration: none;
outline: none;
}
/*テキストの設定*/
.btnlinestretches3 span{
/*テキストを前面に出すためz-indexの値を高く設定*/
position:relative;
z-index: 2;
}
.btnlinestretches3:hover span{
color: #fff;
}
/*線の設定*/
.btnlinestretches3::after {
content:'';
/*絶対配置で線の位置を決める*/
position:absolute;
z-index:1;
bottom:0;
left:0;
/*線の形状*/
background:#333;
width:100%;
height:3px;
/*アニメーションの指定*/
transition:all 0.3s ease-in-out;
}
/*線が伸びて背景に*/
.btnlinestretches3:hover::after {
height:100%;
}
HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/7-1-34.css">body内のボタンを表示させたい場所に以下のHTMLを記載します。
<a href="#" class="btnlinestretches2">7-1-34 少し出ていた線が伸びる</a>
CSSの書き方
/*== 少し出ていた線が伸びる */
.btnlinestretches2{
/*線の基点とするためrelativeを指定*/
position:relative;
/*ボタンの形状*/
color:#333;
padding: 10px 30px;
display:inline-block;
text-decoration: none;
outline: none;
}
/*線の設定*/
.btnlinestretches2::before,
.btnlinestretches2::after {
content:'';
/*絶対配置で線の位置を決める*/
position:absolute;
/*事前に出現させる線の形状*/
border:solid #333;
width:10px;
height:10px;
/*アニメーションの指定*/
transition:all 0.3s ease-in-out;
}
.btnlinestretches2::before{
/*事前に出現させる線の位置*/
top:0;
left:0;
/*事前に出現させる線の形状*/
border-width:2px 0 0 2px;
}
.btnlinestretches2::after{
/*事前に出現させる線の位置*/
bottom:0;
right:0;
/*事前に出現させる線の形状*/
border-width:0 2px 2px 0;
}
/*hoverした際の線の形状*/
.btnlinestretches2:hover::before,
.btnlinestretches2:hover::after{
width:calc(100% - 2px);
height:calc(100% - 2px);
border-color:#666
}
HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/7-1-33.css">body内のボタンを表示させたい場所に以下のHTMLを記載します。
<a href="#" class="btnlinestretches">7-1-33 外の線が伸びる</a>
CSSの書き方
/*== 外の線が伸びる */
.btnlinestretches{
/*線の基点とするためrelativeを指定*/
position:relative;
/*ボタンの形状*/
color:#333;
border:1px solid #333;
padding: 10px 30px;
display:inline-block;
text-decoration: none;
outline: none;
/*アニメーションの指定*/
transition:all 0.3s ease-in-out;
}
/*hoverした際の背景の形状*/
.btnlinestretches:hover{
background:#333;
color: #fff;
border-color:transparent;
}
/*線の設定*/
.btnlinestretches::before,
.btnlinestretches::after {
content:'';
/*絶対配置で線の位置を決める*/
position:absolute;
border:solid #333;
width:10px;
height:10px;
/*アニメーションの指定*/
transition:all 0.3s ease-in-out;
}
/*線の位置と形状*/
.btnlinestretches::before{
top:-6px;
left:-6px;
border-width:1px 0 0 1px;
}
/*線の位置と形状*/
.btnlinestretches::after{
bottom:-6px;
right:-6px;
border-width:0 1px 1px 0;
}
/*hoverした際の線の形状*/
.btnlinestretches:hover::before,
.btnlinestretches:hover::after{
width:calc(100% + 11px);
height:calc(100% + 11px);
border-color:#666;
}