<!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: 30px 0;
border-radius: 30px;
text-decoration: none;
text-align: center;
outline: none;
font-size: max(14px, 2vw);
white-space: nowrap;
width: max(280px, 60vw); /*ボタンの横幅を全て統一*/
}
/*== グラデーションが流れる */
.gradient1 {
/*背景の色と形状*/
background: linear-gradient(
270deg,
#3bade3 0%,
#576fe6 25%,
#9844b7 51%,
#ff357f 100%
);
background-position: 1% 50%;
background-size: 200% auto;
/*アニメーションの指定*/
transition: all 0.3s ease-out;
}
/*hoverした際の、背景の場所とテキスト色の変更*/
.gradient1:hover {
color: #fff;
background-position: 99% 50%;
}
/*== グラデーションが縮小する */
.gradient2 {
/*背景の色と形状*/
background: linear-gradient(to right, #52a0fd 0%, #00e2fa 80%, #00e2fa 100%);
box-shadow: 0 15px 15px rgba(82, 160, 253, 0.4);
/*アニメーションの指定*/
transition: all 0.3s ease-out;
}
/*hoverした際のスケールで全体を縮小*/
.gradient2:hover {
transform: scale(0.95);
}
/*== グラデーションが拡大する */
.gradient3 {
/*背景色*/
background: linear-gradient(to right, #44ea76 0%, #39fad7 80%, #39fad7 100%);
/*アニメーションの指定*/
transition: all 0.3s ease-out;
}
/*hoverした際のスケールで全体を拡大し影を付ける*/
.gradient3:hover {
transform: scale(1.05);
/*ボックスの影*/
box-shadow: 0 15px 15px rgba(57, 250, 215, 0.4);
}
/*== グラデーション線から塗りに変化する */
.gradient4 {
/*ボタンの形状*/
display: inline-block;
padding: 10px 0;
border-radius: 50px;
text-decoration: none;
border: 2px solid #fa6c9f;
color: #fa6c9f;
outline: none;
/*アニメーションの指定*/
transition: all 0.4s ease-out;
}
/*hoverした際、グラデーションと影を付ける*/
.gradient4:hover {
/*ボタンの形状*/
border-color: transparent;
color: #fff;
/*背景の色と形状*/
background: linear-gradient(270deg, #fa6c9f 0%, #ffe140 50%, #ff357f 100%);
background-size: 200% auto;
background-position: right center;
/*ボックスの影*/
box-shadow: 0 5px 10px rgb(250, 108, 159, 0.4);
}
/*========= レイアウトのためのCSS ===============*/
body {
width: 100%;
height: 100vh;
vertical-align: middle;
padding: 30px;
text-align: center;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-image: radial-gradient(
circle farthest-corner at 50.3% 44.5%,
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 0.7) 100.2%
);
}
/*ボタンの配置*/
.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 gradient1">グラデーションが流れる</a>
<a href="#" class="btn gradient2">グラデーションが縮小する</a>
<a href="#" class="btn gradient3">グラデーションが拡大する</a>
<a href="#" class="btn gradient4">グラデーション線から塗りに変化する</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: 30px 0;
border-radius: 30px;
text-decoration: none;
text-align: center;
outline: none;
font-size: max(14px, 2vw);
white-space: nowrap;
width: max(280px, 60vw); /*ボタンの横幅を全て統一*/
}
/*== グラデーションが流れる */
.gradient1 {
/*背景の色と形状*/
background: linear-gradient(
270deg,
#3bade3 0%,
#576fe6 25%,
#9844b7 51%,
#ff357f 100%
);
background-position: 1% 50%;
background-size: 200% auto;
/*アニメーションの指定*/
transition: all 0.3s ease-out;
}
/*hoverした際の、背景の場所とテキスト色の変更*/
.gradient1:hover {
color: #fff;
background-position: 99% 50%;
}
/*== グラデーションが縮小する */
.gradient2 {
/*背景の色と形状*/
background: linear-gradient(to right, #52a0fd 0%, #00e2fa 80%, #00e2fa 100%);
box-shadow: 0 15px 15px rgba(82, 160, 253, 0.4);
/*アニメーションの指定*/
transition: all 0.3s ease-out;
}
/*hoverした際のスケールで全体を縮小*/
.gradient2:hover {
transform: scale(0.95);
}
/*== グラデーションが拡大する */
.gradient3 {
/*背景色*/
background: linear-gradient(to right, #44ea76 0%, #39fad7 80%, #39fad7 100%);
/*アニメーションの指定*/
transition: all 0.3s ease-out;
}
/*hoverした際のスケールで全体を拡大し影を付ける*/
.gradient3:hover {
transform: scale(1.05);
/*ボックスの影*/
box-shadow: 0 15px 15px rgba(57, 250, 215, 0.4);
}
/*== グラデーション線から塗りに変化する */
.gradient4 {
/*ボタンの形状*/
display: inline-block;
padding: 10px 0;
border-radius: 50px;
text-decoration: none;
border: 2px solid #fa6c9f;
color: #fa6c9f;
outline: none;
/*アニメーションの指定*/
transition: all 0.4s ease-out;
}
/*hoverした際、グラデーションと影を付ける*/
.gradient4:hover {
/*ボタンの形状*/
border-color: transparent;
color: #fff;
/*背景の色と形状*/
background: linear-gradient(270deg, #fa6c9f 0%, #ffe140 50%, #ff357f 100%);
background-size: 200% auto;
background-position: right center;
/*ボックスの影*/
box-shadow: 0 5px 10px rgb(250, 108, 159, 0.4);
}
/*========= レイアウトのためのCSS ===============*/
body {
width: 100%;
height: 100vh;
vertical-align: middle;
padding: 30px;
text-align: center;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-image: radial-gradient(
circle farthest-corner at 50.3% 44.5%,
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 0.7) 100.2%
);
}
/*ボタンの配置*/
.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
*/