<!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;
/*ボタンの形状*/
text-decoration: none;
display: inline-block;
background: #333;
color: #fff;
padding: 10px 40px 10px 30px;
margin: 20px 0;
font-size: max(14px, 2vw);
white-space: nowrap;
width: max(270px, 40vw); /*ボタンの横幅を全て統一*/
border-radius: 25px;
text-align: center;
outline: none;
/*アニメーションの指定*/
transition: ease 0.2s;
}
.btn:hover {
background: #555;
}
/* 矢印が右に移動 */
.btnarrow1::after {
content: "";
/*絶対配置で矢印の位置を決める*/
position: absolute;
top: 35%;
right: 20px;
/*矢印の形状*/
width: 10px;
height: 10px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(45deg);
/*アニメーションの指定*/
transition: all 0.3s;
}
/*hoverした際の移動*/
.btnarrow1:hover::after {
right: 13px;
}
/* 矢印が右に移動して現在地に戻る */
.btnarrow2::after {
content: "";
/*絶対配置で矢印の位置を決める*/
position: absolute;
top: 35%;
right: 20px;
/*矢印の形状*/
width: 10px;
height: 10px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(45deg);
}
/*hoverした際のアニメーション*/
.btnarrow2:hover::after {
animation: arrow 0.5s;
}
@keyframes arrow {
50% {
right: 10px;
}
100% {
right: 20px;
}
}
/* 矢印が回転 */
.btnarrow3::after {
content: "";
/*絶対配置で矢印の位置を決める*/
position: absolute;
top: 35%;
right: 20px;
/*矢印の形状*/
width: 10px;
height: 10px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(45deg);
/*アニメーションの指定*/
transition: all 0.3s;
}
/*hoverした際のアニメーション*/
.btnarrow3:hover::after {
animation: arrowrotate 0.3s;
}
@keyframes arrowrotate {
100% {
transform: rotate(360deg);
}
}
/*========= レイアウトのための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 btnarrow1">矢印が右に移動</a>
<a href="#" class="btn btnarrow2">矢印が右に移動して現在地に戻る</a>
<a href="#" class="btn btnarrow3">矢印が回転</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;
/*ボタンの形状*/
text-decoration: none;
display: inline-block;
background: #333;
color: #fff;
padding: 10px 40px 10px 30px;
margin: 20px 0;
font-size: max(14px, 2vw);
white-space: nowrap;
width: max(270px, 40vw); /*ボタンの横幅を全て統一*/
border-radius: 25px;
text-align: center;
outline: none;
/*アニメーションの指定*/
transition: ease 0.2s;
}
.btn:hover {
background: #555;
}
/* 矢印が右に移動 */
.btnarrow1::after {
content: "";
/*絶対配置で矢印の位置を決める*/
position: absolute;
top: 35%;
right: 20px;
/*矢印の形状*/
width: 10px;
height: 10px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(45deg);
/*アニメーションの指定*/
transition: all 0.3s;
}
/*hoverした際の移動*/
.btnarrow1:hover::after {
right: 13px;
}
/* 矢印が右に移動して現在地に戻る */
.btnarrow2::after {
content: "";
/*絶対配置で矢印の位置を決める*/
position: absolute;
top: 35%;
right: 20px;
/*矢印の形状*/
width: 10px;
height: 10px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(45deg);
}
/*hoverした際のアニメーション*/
.btnarrow2:hover::after {
animation: arrow 0.5s;
}
@keyframes arrow {
50% {
right: 10px;
}
100% {
right: 20px;
}
}
/* 矢印が回転 */
.btnarrow3::after {
content: "";
/*絶対配置で矢印の位置を決める*/
position: absolute;
top: 35%;
right: 20px;
/*矢印の形状*/
width: 10px;
height: 10px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(45deg);
/*アニメーションの指定*/
transition: all 0.3s;
}
/*hoverした際のアニメーション*/
.btnarrow3:hover::after {
animation: arrowrotate 0.3s;
}
@keyframes arrowrotate {
100% {
transform: rotate(360deg);
}
}
/*========= レイアウトのための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
*/