<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>@charset "utf-8";
/*--- ボタン共通設定 ---*/
.btn {
display: inline-block;
color: #fff;
padding: 18px 20px;
margin: 20px 0;
text-decoration: none;
outline: none;
font-size: max(14px, 2vw);
white-space: nowrap;
width: max(210px, 40vw); /*ボタンの横幅を全て統一*/
}
/*== 外の線が伸びる */
.linestretches {
/*線の基点とするため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した際の背景の形状*/
.linestretches:hover {
background: #333;
color: #fff;
border-color: transparent;
}
/*線の設定*/
.linestretches::before,
.linestretches::after {
content: "";
/*絶対配置で線の位置を決める*/
position: absolute;
border: solid #333;
width: 10px;
height: 10px;
/*アニメーションの指定*/
transition: all 0.3s ease-in-out;
}
/*線の位置と形状*/
.linestretches::before {
top: -6px;
left: -6px;
border-width: 1px 0 0 1px;
}
/*線の位置と形状*/
.linestretches::after {
bottom: -6px;
right: -6px;
border-width: 0 1px 1px 0;
}
/*hoverした際の線の形状*/
.linestretches:hover::before,
.linestretches:hover::after {
width: calc(100% + 11px);
height: calc(100% + 11px);
border-color: #666;
}
.linestretches2 {
/*線の基点とするためrelativeを指定*/
position: relative;
/*ボタンの形状*/
color: #333;
padding: 10px 30px;
display: inline-block;
text-decoration: none;
outline: none;
}
/*線の設定*/
.linestretches2::before,
.linestretches2::after {
content: "";
/*絶対配置で線の位置を決める*/
position: absolute;
/*事前に出現させる線の形状*/
border: solid #333;
width: 10px;
height: 10px;
/*アニメーションの指定*/
transition: all 0.3s ease-in-out;
}
.linestretches2::before {
/*事前に出現させる線の位置*/
top: 0;
left: 0;
/*事前に出現させる線の形状*/
border-width: 2px 0 0 2px;
}
.linestretches2::after {
/*事前に出現させる線の位置*/
bottom: 0;
right: 0;
/*事前に出現させる線の形状*/
border-width: 0 2px 2px 0;
}
/*hoverした際の線の形状*/
.linestretches2:hover::before,
.linestretches2:hover::after {
width: calc(100% - 2px);
height: calc(100% - 2px);
border-color: #666;
}
/*== 下線が伸びて背景に変わる */
.linestretches3 {
/*線の基点とするためrelativeを指定*/
position: relative;
/*ボタンの形状*/
color: #333;
padding: 10px 30px;
display: inline-block;
text-decoration: none;
outline: none;
}
/*テキストの設定*/
.linestretches3 span {
/*テキストを前面に出すためz-indexの値を高く設定*/
position: relative;
z-index: 2;
}
.linestretches3:hover span {
color: #fff;
}
/*線の設定*/
.linestretches3::after {
content: "";
/*絶対配置で線の位置を決める*/
position: absolute;
z-index: 1;
bottom: 0;
left: 0;
/*線の形状*/
background: #333;
width: 100%;
height: 3px;
/*アニメーションの指定*/
transition: all 0.3s ease-in-out;
}
/*線が伸びて背景に*/
.linestretches3:hover::after {
height: 100%;
}
/*== 線の上を別の線が伸びる */
.linestretches4 {
/*線の基点とするためrelativeを指定*/
position: relative;
/*リンクの形状*/
color: #333;
padding: 10px 50px 10px 30px;
display: inline-block;
text-decoration: none;
outline: none;
}
/*線の設定*/
.linestretches4::before,
.linestretches4::after {
content: "";
/*絶対配置で線の位置を決める*/
position: absolute;
z-index: 1;
bottom: 0;
left: 0;
/*線の形状*/
background: #333;
width: 100%;
height: 5px;
/*アニメーションの指定*/
transition: all 0.3s ease-in-out;
}
/*hover時に伸びる線の形状*/
.linestretches4::after {
width: 0;
background: linear-gradient(to right, #680eef 0%, #00e2fa 100%);
}
/*hover時に100%に伸びる*/
.linestretches4:hover::after {
width: 100%;
}
/*矢印の設定*/
.linestretches4 span::after {
content: "";
/*絶対配置で矢印の位置を決める*/
position: absolute;
top: 1em;
right: 18px;
/*矢印の形状*/
width: 10px;
height: 10px;
border-top: 2px solid #000;
border-right: 2px solid #000;
transform: rotate(45deg);
/*アニメーションの指定*/
transition: all 0.3s;
}
/*hover時に矢印が移動*/
.linestretches4:hover span::after {
right: 5px;
}
/*== 矢印の線がループして伸縮 */
.linestretches5 {
/*線の基点とするためrelativeを指定*/
position: relative;
/*リンクの形状*/
color: #333;
padding: 10px 0;
display: inline-block;
text-decoration: none;
outline: none;
}
/*線の設定*/
.linestretches5::before {
content: "";
/*絶対配置で線の位置を決める*/
position: absolute;
bottom: 0;
left: 0;
/*線の形状*/
width: 100%;
height: 3px;
background: #333;
}
/*矢印の設定*/
.linestretches5::after {
content: "";
/*絶対配置で線の位置を決める*/
position: absolute;
bottom: -3px;
/*矢印の形状*/
width: 8px;
height: 8px;
border-top: 3px solid #333;
border-right: 3px solid #333;
transform: rotate(45deg);
}
/*線と矢印を繰り返しアニメーション*/
.linestretches5::before {
animation: arrowlong01 2s ease infinite;
}
.linestretches5::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;
}
}
/*========= レイアウトのためのCSS ===============*/
body {
width: 100%;
height: 100vh;
vertical-align: middle;
padding: 30px 0;
text-align: center;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-image: linear-gradient(
103.3deg,
rgba(252, 225, 208, 1) 30%,
rgba(255, 173, 214, 1) 55.7%,
rgba(162, 186, 245, 1) 81.8%
);
}
/*ボタンの配置*/
.btn-position {
display: flex;
flex-direction: column;
align-items: center;
}
p {
margin: 0 0 10px 0;
}</style>
</head>
<body>
<body>
<div class="btn-position">
<a href="#" class="btn linestretches">外の線が伸びる</a>
<a href="#" class="btn linestretches2">少し出ていた線が伸びる</a>
<a href="#" class="btn linestretches3">
<span>下線が伸びて背景に変わる</span>
</a>
<a href="#" class="btn linestretches4">
<span>線の上を別の線が伸びる</span>
</a>
<a href="#" class="btn linestretches5">
<span>矢印の線がループして伸縮</span>
</a>
</div>
<script>
</script>
</body>
</html>/*
外部依存 CSS:
- https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css
*/
@charset "utf-8";
/*--- ボタン共通設定 ---*/
.btn {
display: inline-block;
color: #fff;
padding: 18px 20px;
margin: 20px 0;
text-decoration: none;
outline: none;
font-size: max(14px, 2vw);
white-space: nowrap;
width: max(210px, 40vw); /*ボタンの横幅を全て統一*/
}
/*== 外の線が伸びる */
.linestretches {
/*線の基点とするため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した際の背景の形状*/
.linestretches:hover {
background: #333;
color: #fff;
border-color: transparent;
}
/*線の設定*/
.linestretches::before,
.linestretches::after {
content: "";
/*絶対配置で線の位置を決める*/
position: absolute;
border: solid #333;
width: 10px;
height: 10px;
/*アニメーションの指定*/
transition: all 0.3s ease-in-out;
}
/*線の位置と形状*/
.linestretches::before {
top: -6px;
left: -6px;
border-width: 1px 0 0 1px;
}
/*線の位置と形状*/
.linestretches::after {
bottom: -6px;
right: -6px;
border-width: 0 1px 1px 0;
}
/*hoverした際の線の形状*/
.linestretches:hover::before,
.linestretches:hover::after {
width: calc(100% + 11px);
height: calc(100% + 11px);
border-color: #666;
}
.linestretches2 {
/*線の基点とするためrelativeを指定*/
position: relative;
/*ボタンの形状*/
color: #333;
padding: 10px 30px;
display: inline-block;
text-decoration: none;
outline: none;
}
/*線の設定*/
.linestretches2::before,
.linestretches2::after {
content: "";
/*絶対配置で線の位置を決める*/
position: absolute;
/*事前に出現させる線の形状*/
border: solid #333;
width: 10px;
height: 10px;
/*アニメーションの指定*/
transition: all 0.3s ease-in-out;
}
.linestretches2::before {
/*事前に出現させる線の位置*/
top: 0;
left: 0;
/*事前に出現させる線の形状*/
border-width: 2px 0 0 2px;
}
.linestretches2::after {
/*事前に出現させる線の位置*/
bottom: 0;
right: 0;
/*事前に出現させる線の形状*/
border-width: 0 2px 2px 0;
}
/*hoverした際の線の形状*/
.linestretches2:hover::before,
.linestretches2:hover::after {
width: calc(100% - 2px);
height: calc(100% - 2px);
border-color: #666;
}
/*== 下線が伸びて背景に変わる */
.linestretches3 {
/*線の基点とするためrelativeを指定*/
position: relative;
/*ボタンの形状*/
color: #333;
padding: 10px 30px;
display: inline-block;
text-decoration: none;
outline: none;
}
/*テキストの設定*/
.linestretches3 span {
/*テキストを前面に出すためz-indexの値を高く設定*/
position: relative;
z-index: 2;
}
.linestretches3:hover span {
color: #fff;
}
/*線の設定*/
.linestretches3::after {
content: "";
/*絶対配置で線の位置を決める*/
position: absolute;
z-index: 1;
bottom: 0;
left: 0;
/*線の形状*/
background: #333;
width: 100%;
height: 3px;
/*アニメーションの指定*/
transition: all 0.3s ease-in-out;
}
/*線が伸びて背景に*/
.linestretches3:hover::after {
height: 100%;
}
/*== 線の上を別の線が伸びる */
.linestretches4 {
/*線の基点とするためrelativeを指定*/
position: relative;
/*リンクの形状*/
color: #333;
padding: 10px 50px 10px 30px;
display: inline-block;
text-decoration: none;
outline: none;
}
/*線の設定*/
.linestretches4::before,
.linestretches4::after {
content: "";
/*絶対配置で線の位置を決める*/
position: absolute;
z-index: 1;
bottom: 0;
left: 0;
/*線の形状*/
background: #333;
width: 100%;
height: 5px;
/*アニメーションの指定*/
transition: all 0.3s ease-in-out;
}
/*hover時に伸びる線の形状*/
.linestretches4::after {
width: 0;
background: linear-gradient(to right, #680eef 0%, #00e2fa 100%);
}
/*hover時に100%に伸びる*/
.linestretches4:hover::after {
width: 100%;
}
/*矢印の設定*/
.linestretches4 span::after {
content: "";
/*絶対配置で矢印の位置を決める*/
position: absolute;
top: 1em;
right: 18px;
/*矢印の形状*/
width: 10px;
height: 10px;
border-top: 2px solid #000;
border-right: 2px solid #000;
transform: rotate(45deg);
/*アニメーションの指定*/
transition: all 0.3s;
}
/*hover時に矢印が移動*/
.linestretches4:hover span::after {
right: 5px;
}
/*== 矢印の線がループして伸縮 */
.linestretches5 {
/*線の基点とするためrelativeを指定*/
position: relative;
/*リンクの形状*/
color: #333;
padding: 10px 0;
display: inline-block;
text-decoration: none;
outline: none;
}
/*線の設定*/
.linestretches5::before {
content: "";
/*絶対配置で線の位置を決める*/
position: absolute;
bottom: 0;
left: 0;
/*線の形状*/
width: 100%;
height: 3px;
background: #333;
}
/*矢印の設定*/
.linestretches5::after {
content: "";
/*絶対配置で線の位置を決める*/
position: absolute;
bottom: -3px;
/*矢印の形状*/
width: 8px;
height: 8px;
border-top: 3px solid #333;
border-right: 3px solid #333;
transform: rotate(45deg);
}
/*線と矢印を繰り返しアニメーション*/
.linestretches5::before {
animation: arrowlong01 2s ease infinite;
}
.linestretches5::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;
}
}
/*========= レイアウトのためのCSS ===============*/
body {
width: 100%;
height: 100vh;
vertical-align: middle;
padding: 30px 0;
text-align: center;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-image: linear-gradient(
103.3deg,
rgba(252, 225, 208, 1) 30%,
rgba(255, 173, 214, 1) 55.7%,
rgba(162, 186, 245, 1) 81.8%
);
}
/*ボタンの配置*/
.btn-position {
display: flex;
flex-direction: column;
align-items: center;
}
p {
margin: 0 0 10px 0;
}/*
外部依存 CSS (このデモは下記の CSS にも依存します):
- https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css
*/