<!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";
/*== 背景共通設定 */
body {
width: 100%;
height: 100vh;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-image: url("/wp-content/uploads/demos/_assets/img_06.jpg");
object-fit: cover;
}
/*ボタンの配置*/
.btn-position {
display: flex;
flex-direction: column;
align-items: center;
}
/*== ボタン共通設定 */
.btn {
/*アニメーションの起点とするためrelativeを指定*/
position: relative;
/*ボタンの形状*/
text-decoration: none;
border: 1px solid #333;
display: inline-block;
margin: 3vw 0;
text-align: center;
background: transparent;
outline: none;
transition: all 0.2s ease; /*アニメーションの指定*/
width: clamp(300px, 50vw, 500px); /*ボタンの横幅を全て統一*/
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;
border-radius: 25px;
-webkit-border-radius: 25px;
}
/*hoverをした後のボタンの形状*/
.btn:hover {
border-color: transparent;
}
/*ボタン内spanの形状*/
.btn span {
position: relative;
z-index: 2; /*z-indexの数値をあげて文字を背景よりも手前に表示*/
/*テキストの形状*/
display: block;
padding: 15px 10px;
background: rgb(90, 150, 255);
border-radius: 25px;
color: #333;
/*アニメーションの指定*/
transition: all 0.3s ease;
font-size: clamp(0.8rem, 2vw, 1rem);
}
/*== 下に押し込まれる（立体が平面に） */
/*影の設定*/
.pushdown:before {
content: "";
/*絶対配置で影の位置を決める*/
position: absolute;
z-index: -1;
top: 5px;
left: 0;
/*影の形状*/
width: 100%;
height: 100%;
border-radius: 25px;
background-color: #333;
}
/*hoverの際にY軸に4pxずらす*/
.pushdown:hover span {
background-color: #333;
color: #fff;
transform: translateY(4px);
}
/*== 右下に押し込まれる（立体が平面に） */
/*影の設定*/
.pushright:before {
content: "";
/*絶対配置で影の位置を決める*/
position: absolute;
z-index: -1;
top: 7px;
left: 7px;
/*影の形状*/
width: 100%;
height: 100%;
border-radius: 25px;
background-color: #333;
}
/*hoverの際にX・Y軸に7pxずらす*/
.pushright:hover span {
background-color: #333;
color: #fff;
transform: translate(7px, 7px);
}
/*== 左下に押し込まれる（立体が平面に） */
/*影の設定*/
.pushleft:before {
content: "";
/*絶対配置で影の位置を決める*/
position: absolute;
z-index: -1;
top: 7px;
right: 7px;
/*影の形状*/
width: 100%;
height: 100%;
border-radius: 25px;
background-color: #333;
}
/*hoverの際にX軸に-4px・Y軸に4pxずらす*/
.pushleft:hover span {
background-color: #333;
color: #fff;
transform: translate(-7px, 7px);
}
/*== 影がついて浮き上がる */
/*ボタンの形状*/
.float1 {
border: 1px solid #ccc;
color: #333;
padding: 10px 20px;
display: inline-block;
text-decoration: none;
background: rgba(90, 150, 255, 0.5);
outline: none;
/*アニメーションの指定*/
transition: all 0.3s;
}
/*hoverをしたらボックスに影がつく*/
.float1:hover {
box-shadow: 0 7px 10px rgba(0, 0, 0, 0.5);
border-color: transparent;
}
/*== 影が拡がって浮き上がる */
/*ボタンの形状*/
.float2 {
background: #fff;
border: 1px solid #ccc;
color: #333;
padding: 10px 20px;
display: inline-block;
text-decoration: none;
background: rgba(90, 150, 255, 0.5);
outline: none;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2), 0 0 40px rgba(128, 128, 128, 0.1);
/*アニメーションの設定*/
transition: all 0.3s;
}
/*hoverをしたらボックスの影が拡がり色が濃くなる*/
.float2:hover {
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.4), 0 0 50px rgba(128, 128, 128, 0.3);
border-color: transparent;
}
/*== 上に移動し影がついて浮き上がる */
/*ボタンの形状*/
.float3 {
position: relative;
top: 0;
padding: 10px 20px;
display: inline-block;
border: 1px solid #ccc;
color: #333;
background: rgba(90, 150, 255, 0.5);
text-decoration: none;
outline: none;
/*アニメーションの設定*/
transition: all 0.3s;
}
/*hoverをしたらボックスに影がつき、上に上がる*/
.float3:hover {
top: -3px;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
}
/*========= レイアウトのためのCSS ===============*/
body {
vertical-align: middle;
padding: 20px 0;
text-align: center;
}
h2 {
margin-top: 5%;
}
p {
margin: 0 0 10px 0;
}</style>
</head>
<body>
<body>
<h2>下に押し込まれるボタン</h2>
<div class="btn-position">
<a href="#" class="btn pushdown">
<span>下に押し込まれる（立体が平面に）</span>
</a>
<a href="#" class="btn pushright">
<span>右下に押し込まれる（立体が平面に）</span>
</a>
<a href="#" class="btn pushleft">
<span>左下に押し込まれる（立体が平面に）</span>
</a>
</div>
<h2>浮き上がるボタン</h2>
<div class="btn-position">
<a href="#" class="btn float1">影がついて浮き上がる</a>
<a href="#" class="btn float2">影が拡がって浮き上がる</a>
<a href="#" class="btn float3">上に移動し影がついて浮き上がる</a>
</div>
<script>
</script>
</body>
</html>