<!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(240px, 50vw, 500px); /*ボタンの横幅を全て統一*/
border-radius: 12px;
-webkit-border-radius: 12px;
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;
/*はみ出す背景色を隠す*/
overflow: hidden;
}
/*hoverした際のボタンの形状*/
.btn:hover {
color: #fff;
border-color: rgba(90, 150, 255, 0.5);
/*色の変化を遅らせる*/
transition-delay: 0.6s;
}
/*線の設定*/
.btn span {
padding: 15px 0;
display: block;
z-index: 2;
}
/*== 線から塗りに変化（上から下） */
/*線の設定*/
.bordertop span::before,
.bordertop span::after {
content: "";
/*絶対配置で線の位置を決める*/
position: absolute;
width: 5px;
height: 0;
background: rgba(90, 150, 255, 0.5); /*線の形状（色）*/
/*アニメーションの設定*/
transition: all 0.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: rgba(90, 150, 255, 0.9); /*背景色の設定*/
/*アニメーションの設定*/
transition: all 0.3s;
}
/*hoverをすると文字が白色になり背景が伸びる*/
.bordertop:hover::before {
color: #fff;
height: 100%;
/*0.4秒遅れてアニメーション*/
transition-delay: 0.4s;
}
/*== 線から塗りに変化（下から上）*/
/*線の設定*/
.borderbottom span::before,
.borderbottom span::after {
content: '';
/*絶対配置で線の位置を決める*/
position: absolute;
width: 5px;
height: 0;
background: rgba(90, 150, 255, 0.5); /*線の形状（色）*/
/*アニメーションの設定*/
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: rgba(90, 150, 255, 0.9); /*背景色の設定*/
/*アニメーションの設定*/
transition: all .3s;
}
/*hoverをすると背景が伸びる*/
.borderbottom:hover::before{
color: #fff;
height: 100%;
/*0.4秒遅れてアニメーション*/
transition-delay: .4s;
}
/*== 線から塗りに変化（左から右） */
/*線の設定*/
.borderleft span::before,
.borderleft span::after {
content: '';
/*絶対配置で線の位置を決める*/
position: absolute;
width: 0;
height: 5px;
background: rgba(90, 150, 255, 0.5); /*線の形状（色）*/
/*アニメーションの設定*/
transition: all .3s;
}
/*左上線*/
.borderleft span::before {
left: 0;
top: 0;
}
/*左下線*/
.borderleft span::after {
left: 0;
bottom: 0;
}
/*hoverをすると線が伸びる*/
.borderleft:hover span::before,
.borderleft:hover span::after {
width: 100%;
}
/*背景の設定*/
.borderleft::before{
content: '';
/*絶対配置で線の位置を決める*/
position: absolute;
left: 0;
bottom: 0;
z-index: -1;
/*背景の形状*/
height: 100%;
width: 0;
background: rgba(90, 150, 255, 0.9); /*背景色の設定*/
/*アニメーションの設定*/
transition: all .3s;
}
/*hoverをすると背景が伸びる*/
.borderleft:hover::before{
color: #fff;
width: 100%;
/*0.4秒遅れてアニメーション*/
transition-delay: .4s;
}
/*== 線から塗りに変化（右から左） */
/*線の設定*/
.borderright span::before,
.borderright span::after {
content: '';
/*絶対配置で線の位置を決める*/
position: absolute;
width: 0;
height: 5px;
/*線の形状*/
background: rgba(90, 150, 255, 0.5);
/*アニメーションの設定*/
transition: all .3s;
}
/*右上線*/
.borderright span::before {
right: 0;
top: 0;
}
/*右下線*/
.borderright span::after {
right: 0;
bottom: 0;
}
/*hoverをすると線が伸びる*/
.borderright:hover span::before,
.borderright:hover span::after {
width: 100%;
}
/*背景の設定*/
.borderright::before{
content: '';
/*絶対配置で線の位置を決める*/
position: absolute;
right: 0;
bottom: 0;
z-index: -1;
/*背景の形状*/
height: 100%;
width: 0;
background: rgba(90, 150, 255, 0.9);
/*アニメーションの設定*/
transition: all .3s;
}
/*hoverをすると背景が伸びる*/
.borderright:hover::before{
width: 100%;
/*0.4秒遅れてアニメーション*/
transition-delay: .4s;
}
/*== 線から塗りに変化（中央から外） */
/*線の設定*/
.bordercenter span::before,
.bordercenter span::after{
content: '';
/*絶対配置で線の位置を決める*/
position: absolute;
/*線の形状*/
width: 100%;
height: 5px;
background: rgba(90, 150, 255, 0.5);
/*アニメーションの設定*/
transition: all .3s;
transform: scale(0,1);
transform-origin: center;
}
/*上線*/
.bordercenter span::before {
left: 0;
top: 0;
}
/*下線*/
.bordercenter span::after {
left: 0;
bottom: 0;
}
/*hoverをすると線が伸びる*/
.bordercenter:hover span::before,
.bordercenter:hover span::after{
transform: scale(1,1);
}
/*背景の設定*/
.bordercenter::before{
content: '';
/*絶対配置で線の位置を決める*/
position: absolute;
left: 0;
top: 0;
z-index: -1;
/*背景の形状*/
height: 100%;
width: 100%;
background: rgba(90, 150, 255, 0.9);
/*アニメーションの設定*/
transition: all .3s;
transform: scale(0,1);
transform-origin: center;
}
/*hoverをすると背景が伸びる*/
.bordercenter:hover::before{
width: 100%;
/*0.4秒遅れてアニメーション*/
transition-delay: .4s;
transform: scale(1,1);
}
/*========= レイアウトのための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 bordertop">
<span>線から塗りに変化（上から下）</span>
</a>
<a href="#" class="btn borderbottom">
<span>線から塗りに変化（下から上）</span>
</a>
<a href="#" class="btn borderleft">
<span>線から塗りに変化（左から右）</span>
</a>
<a href="#" class="btn borderright">
<span>線から塗りに変化（右から左）</span>
</a>
<a href="#" class="btn bordercenter">
<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 {
/*アニメーションの起点とするため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(240px, 50vw, 500px); /*ボタンの横幅を全て統一*/
border-radius: 12px;
-webkit-border-radius: 12px;
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;
/*はみ出す背景色を隠す*/
overflow: hidden;
}
/*hoverした際のボタンの形状*/
.btn:hover {
color: #fff;
border-color: rgba(90, 150, 255, 0.5);
/*色の変化を遅らせる*/
transition-delay: 0.6s;
}
/*線の設定*/
.btn span {
padding: 15px 0;
display: block;
z-index: 2;
}
/*== 線から塗りに変化（上から下） */
/*線の設定*/
.bordertop span::before,
.bordertop span::after {
content: "";
/*絶対配置で線の位置を決める*/
position: absolute;
width: 5px;
height: 0;
background: rgba(90, 150, 255, 0.5); /*線の形状（色）*/
/*アニメーションの設定*/
transition: all 0.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: rgba(90, 150, 255, 0.9); /*背景色の設定*/
/*アニメーションの設定*/
transition: all 0.3s;
}
/*hoverをすると文字が白色になり背景が伸びる*/
.bordertop:hover::before {
color: #fff;
height: 100%;
/*0.4秒遅れてアニメーション*/
transition-delay: 0.4s;
}
/*== 線から塗りに変化（下から上）*/
/*線の設定*/
.borderbottom span::before,
.borderbottom span::after {
content: '';
/*絶対配置で線の位置を決める*/
position: absolute;
width: 5px;
height: 0;
background: rgba(90, 150, 255, 0.5); /*線の形状（色）*/
/*アニメーションの設定*/
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: rgba(90, 150, 255, 0.9); /*背景色の設定*/
/*アニメーションの設定*/
transition: all .3s;
}
/*hoverをすると背景が伸びる*/
.borderbottom:hover::before{
color: #fff;
height: 100%;
/*0.4秒遅れてアニメーション*/
transition-delay: .4s;
}
/*== 線から塗りに変化（左から右） */
/*線の設定*/
.borderleft span::before,
.borderleft span::after {
content: '';
/*絶対配置で線の位置を決める*/
position: absolute;
width: 0;
height: 5px;
background: rgba(90, 150, 255, 0.5); /*線の形状（色）*/
/*アニメーションの設定*/
transition: all .3s;
}
/*左上線*/
.borderleft span::before {
left: 0;
top: 0;
}
/*左下線*/
.borderleft span::after {
left: 0;
bottom: 0;
}
/*hoverをすると線が伸びる*/
.borderleft:hover span::before,
.borderleft:hover span::after {
width: 100%;
}
/*背景の設定*/
.borderleft::before{
content: '';
/*絶対配置で線の位置を決める*/
position: absolute;
left: 0;
bottom: 0;
z-index: -1;
/*背景の形状*/
height: 100%;
width: 0;
background: rgba(90, 150, 255, 0.9); /*背景色の設定*/
/*アニメーションの設定*/
transition: all .3s;
}
/*hoverをすると背景が伸びる*/
.borderleft:hover::before{
color: #fff;
width: 100%;
/*0.4秒遅れてアニメーション*/
transition-delay: .4s;
}
/*== 線から塗りに変化（右から左） */
/*線の設定*/
.borderright span::before,
.borderright span::after {
content: '';
/*絶対配置で線の位置を決める*/
position: absolute;
width: 0;
height: 5px;
/*線の形状*/
background: rgba(90, 150, 255, 0.5);
/*アニメーションの設定*/
transition: all .3s;
}
/*右上線*/
.borderright span::before {
right: 0;
top: 0;
}
/*右下線*/
.borderright span::after {
right: 0;
bottom: 0;
}
/*hoverをすると線が伸びる*/
.borderright:hover span::before,
.borderright:hover span::after {
width: 100%;
}
/*背景の設定*/
.borderright::before{
content: '';
/*絶対配置で線の位置を決める*/
position: absolute;
right: 0;
bottom: 0;
z-index: -1;
/*背景の形状*/
height: 100%;
width: 0;
background: rgba(90, 150, 255, 0.9);
/*アニメーションの設定*/
transition: all .3s;
}
/*hoverをすると背景が伸びる*/
.borderright:hover::before{
width: 100%;
/*0.4秒遅れてアニメーション*/
transition-delay: .4s;
}
/*== 線から塗りに変化（中央から外） */
/*線の設定*/
.bordercenter span::before,
.bordercenter span::after{
content: '';
/*絶対配置で線の位置を決める*/
position: absolute;
/*線の形状*/
width: 100%;
height: 5px;
background: rgba(90, 150, 255, 0.5);
/*アニメーションの設定*/
transition: all .3s;
transform: scale(0,1);
transform-origin: center;
}
/*上線*/
.bordercenter span::before {
left: 0;
top: 0;
}
/*下線*/
.bordercenter span::after {
left: 0;
bottom: 0;
}
/*hoverをすると線が伸びる*/
.bordercenter:hover span::before,
.bordercenter:hover span::after{
transform: scale(1,1);
}
/*背景の設定*/
.bordercenter::before{
content: '';
/*絶対配置で線の位置を決める*/
position: absolute;
left: 0;
top: 0;
z-index: -1;
/*背景の形状*/
height: 100%;
width: 100%;
background: rgba(90, 150, 255, 0.9);
/*アニメーションの設定*/
transition: all .3s;
transform: scale(0,1);
transform-origin: center;
}
/*hoverをすると背景が伸びる*/
.bordercenter:hover::before{
width: 100%;
/*0.4秒遅れてアニメーション*/
transition-delay: .4s;
transform: scale(1,1);
}
/*========= レイアウトのための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
*/