<!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 {
/*アニメーションの起点とするためrelativeを指定*/
position: relative;
/*ボタンの形状*/
display: inline-block;
margin: 10px 0;
color: #333;
border: 1px solid rgba(255, 255, 255, 0.18);
text-decoration: none;
text-align: center;
outline: none;
background-color: rgba(255, 255, 255, 0.3);
font-size: clamp(0.8rem, 2vw, 1rem); /*ボタンのテキストを全て統一*/
width: clamp(300px, 50vw, 500px); /*ボタンの横幅を全て統一*/
backdrop-filter: blur(6.5px);
-webkit-backdrop-filter: blur(6.5px);
box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
-webkit-box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
/*アニメーションの指定*/
transition: all 0.3s;
transition-delay: 0.7s; /*0.7秒遅れてアニメーション*/
}
/*hoverした際のボタンの形状*/
.btn:hover {
color: rgb(90, 150, 255);
font-weight: 600;
font-size: 1.1em;
border-color: rgba(90, 150, 255, 0.5);
}
/*線の設定*/
.btn span {
padding: 15px 0;
display: block;
}
/*横線の設定*/
.btn::before,
.btn::after {
content: "";
/*絶対配置で線の位置を決める*/
position: absolute;
/*線の形状*/
width: 0;
height: 5px;
background: rgb(90, 150, 255);
/*アニメーションの指定*/
transition: all 0.2s linear;
}
/*縦線の設定*/
.btn span::before,
.btn span::after {
content: "";
/*絶対配置で線の位置を決める*/
position: absolute;
/*線の形状*/
width: 5px;
height: 0;
background: rgb(90, 150, 255);
/*アニメーションの指定*/
transition: all 0.2s linear;
}
/*hoverした際、線が縦横100%伸びる*/
.btn:hover::before,
.btn:hover::after {
width: 100%;
}
.btn:hover span::before,
.btn:hover span::after {
height: 100%;
}
/*== 左上と右下から枠線が伸びて塗りに */
/*横線が0.2秒送れて出現*/
.bordercircle1::before {
right: 0;
top: 0;
transition-delay: 0.2s;
}
.bordercircle1::after {
left: 0;
bottom: 0;
transition-delay: 0.2s;
}
/*縦線が出現*/
.bordercircle1 span::before {
left: 0;
top: 0;
}
.bordercircle1 span::after {
right: 0;
bottom: 0;
}
/*== 左下⇒右下⇒右上⇒左上⇒左下に枠線が伸びて塗りに */
/*左下から右下へ伸びる横線*/
.bordercircle2::after {
left: 0;
bottom: 0;
}
/*右下から上へ伸びる縦線*/
.bordercircle2 span::after {
right: 0;
bottom: 0;
transition-delay: 0.2s;
}
/*右上から左上へ伸びる横線*/
.bordercircle2::before {
right: 0;
top: 0;
transition-delay: 0.4s;
}
/*左上から左下へ伸びる横線*/
.bordercircle2 span::before {
left: 0;
top: 0;
transition-delay: 0.6s;
}
/*== 左上と右下から枠線が伸びて塗りに */
/*右下から右上へ伸びる横線*/
.bordercircle3::after {
right: 0;
bottom: 0;
transition-duration: 0.4s;
}
/*右下から右上へ伸びる縦線*/
.bordercircle3 span::after {
right: 0;
bottom: 0;
transition-duration: 0.4s;
}
/*左上から右上へ伸びる横線*/
.bordercircle3::before {
left: 0;
top: 0;
transition-duration: 0.4s;
}
/*左上から左下へ伸びる横線*/
.bordercircle3 span::before {
left: 0;
top: 0;
transition-duration: 0.4s;
}
/*========= レイアウトのための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: url("/wp-content/uploads/demos/_assets/img_06.jpg");
}
/*ボタンの配置*/
.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 bordercircle1">
<span>左上と右下から枠線が伸びて<br>塗りに その1</span>
</a>
<a href="#" class="btn bordercircle2">
<span>左下から反時計回りに枠線が伸びて<br>塗りに</span>
</a>
<a href="#" class="btn bordercircle3">
<span>左上と右下から枠線が伸びて<br>塗りに その2</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 {
/*アニメーションの起点とするためrelativeを指定*/
position: relative;
/*ボタンの形状*/
display: inline-block;
margin: 10px 0;
color: #333;
border: 1px solid rgba(255, 255, 255, 0.18);
text-decoration: none;
text-align: center;
outline: none;
background-color: rgba(255, 255, 255, 0.3);
font-size: clamp(0.8rem, 2vw, 1rem); /*ボタンのテキストを全て統一*/
width: clamp(300px, 50vw, 500px); /*ボタンの横幅を全て統一*/
backdrop-filter: blur(6.5px);
-webkit-backdrop-filter: blur(6.5px);
box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
-webkit-box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
/*アニメーションの指定*/
transition: all 0.3s;
transition-delay: 0.7s; /*0.7秒遅れてアニメーション*/
}
/*hoverした際のボタンの形状*/
.btn:hover {
color: rgb(90, 150, 255);
font-weight: 600;
font-size: 1.1em;
border-color: rgba(90, 150, 255, 0.5);
}
/*線の設定*/
.btn span {
padding: 15px 0;
display: block;
}
/*横線の設定*/
.btn::before,
.btn::after {
content: "";
/*絶対配置で線の位置を決める*/
position: absolute;
/*線の形状*/
width: 0;
height: 5px;
background: rgb(90, 150, 255);
/*アニメーションの指定*/
transition: all 0.2s linear;
}
/*縦線の設定*/
.btn span::before,
.btn span::after {
content: "";
/*絶対配置で線の位置を決める*/
position: absolute;
/*線の形状*/
width: 5px;
height: 0;
background: rgb(90, 150, 255);
/*アニメーションの指定*/
transition: all 0.2s linear;
}
/*hoverした際、線が縦横100%伸びる*/
.btn:hover::before,
.btn:hover::after {
width: 100%;
}
.btn:hover span::before,
.btn:hover span::after {
height: 100%;
}
/*== 左上と右下から枠線が伸びて塗りに */
/*横線が0.2秒送れて出現*/
.bordercircle1::before {
right: 0;
top: 0;
transition-delay: 0.2s;
}
.bordercircle1::after {
left: 0;
bottom: 0;
transition-delay: 0.2s;
}
/*縦線が出現*/
.bordercircle1 span::before {
left: 0;
top: 0;
}
.bordercircle1 span::after {
right: 0;
bottom: 0;
}
/*== 左下⇒右下⇒右上⇒左上⇒左下に枠線が伸びて塗りに */
/*左下から右下へ伸びる横線*/
.bordercircle2::after {
left: 0;
bottom: 0;
}
/*右下から上へ伸びる縦線*/
.bordercircle2 span::after {
right: 0;
bottom: 0;
transition-delay: 0.2s;
}
/*右上から左上へ伸びる横線*/
.bordercircle2::before {
right: 0;
top: 0;
transition-delay: 0.4s;
}
/*左上から左下へ伸びる横線*/
.bordercircle2 span::before {
left: 0;
top: 0;
transition-delay: 0.6s;
}
/*== 左上と右下から枠線が伸びて塗りに */
/*右下から右上へ伸びる横線*/
.bordercircle3::after {
right: 0;
bottom: 0;
transition-duration: 0.4s;
}
/*右下から右上へ伸びる縦線*/
.bordercircle3 span::after {
right: 0;
bottom: 0;
transition-duration: 0.4s;
}
/*左上から右上へ伸びる横線*/
.bordercircle3::before {
left: 0;
top: 0;
transition-duration: 0.4s;
}
/*左上から左下へ伸びる横線*/
.bordercircle3 span::before {
left: 0;
top: 0;
transition-duration: 0.4s;
}
/*========= レイアウトのための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: url("/wp-content/uploads/demos/_assets/img_06.jpg");
}
/*ボタンの配置*/
.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
*/