【CSS】高級感のあるボタン
寺田拓真約4分で読めます
はじめに
この記事の概要
こんにちは、たくまです！
以前、高級感のある色をCSSで表現する方法についてご紹介しました！
CSSで高級感あるグラデーションを表現
CSSで高級感のあるグラデーションを表現する方法を解説。金色・銀色・紺色の配色例やlinear-gradientのコツ、受賞メダル風デザインの実装サンプルも紹介します。
今回は高級シリーズでボタンについてもご紹介したいと思います！
対象読者
- CSS初学者の方
- ボタンのデザインにお悩みの方
見本とコード
光沢のあるボタン
カーソルをボタンに置くとキラッと光るボタンです。
HTMLとCSSは以下になります。
<button class="c-button">
<p class="c-button__text">Coming Soon</p>
</button>.c-button {
overflow: hidden;
position: relative;
display: block;
width: 600px;
text-align: center;
padding: 20px;
margin: 40px auto 0;
border: 1px solid;
border-image: linear-gradient(to right, $gold-color, $light-gold, $gold-color)
1;
&::before {
content: "";
display: block;
width: 5rem;
height: 300%;
top: 50%;
position: absolute;
background: linear-gradient(
to right,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.3) 100%
);
transform: translate(-500%, -50%) rotate(-45deg);
transition: transform 0.6s ease-in-out;
}
&:hover::before {
transform: translate(1000%, -50%) rotate(-45deg);
}
.c-button__text {
font-size: 20px;
color: $white-color;
display: flex;
gap: 8px;
align-items: center;
justify-content: center;
}
}2行目のoverflow: hidden;を設定しないと光沢が飛び出してしまうので、注意してください。
個人的に光沢はできるだけ早めに移動するほうがしっくりきます。
ボタンの長さや幅に応じて、transitionの秒数は適宜変更してください。
ゆっくりとグラデーションが起きるボタン
ホバーすることでボタンにグラデーション色が塗られます。
HTMLとCSSは以下になります。
<button class="c-button in">ボタンです</button>.c-button {
display: inline-block;
border: 1px solid white;
padding: 18px 80px 20px;
text-transform: uppercase;
color: white;
text-decoration: none;
font-weight: 500;
font-style: normal;
font-size: 0.65rem;
letter-spacing: 0.3em;
border-radius: 0;
font-family: "Helvetica Neue", Helvetica, Arial, Sana;
transition: all 0.7s ease-out;
margin: 5rem;
}
.in {
background: linear-gradient(
270deg,
rgba(137, 247, 254, 0.8),
rgba(102, 166, 255, 0.8),
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0)
);
background-size: 300% 300%;
background-position: 1% 50%;
}
.c-button:hover {
color: white;
border: 1px solid rgba(193, 164, 112, 0);
background-position: 99% 50%;
}linear-gradientにて色を指定しているので、お好きな色で様々なボタンを使用可能です。
枠線にグラデーションが起きるボタン
ホバーするとボタンの枠線にグラデーションが起きるボタンです。
HTMLとCSSは以下になります。
<button class="c-button"></button>.c-button {
margin: 200px;
width: 150px;
height: 50px;
cursor: pointer;
border: none;
display: flex;
align-items: center;
justify-content: center;
background-color: #7f5a83;
background-image: linear-gradient(315deg, #7f5a83 0%, #0d324d 74%);
background-size: 200% 100%;
background-position: left;
background-repeat: no-repeat;
transition: 500ms;
}
.c-button::before {
content: "ボタンです";
color: rgba(255, 255, 255, 1);
font-size: 16px;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 140px;
height: 40px;
background-color: #1b2845;
background-image: linear-gradient(315deg, #1b2845 0%, #274060 74%);
transition: 500ms;
}
.c-button:hover {
background-position: right;
}
.c-button:hover::before {
color: rgba(255, 255, 255, 0.8);
}
.c-button:focus {
outline: none;
}こちらもlinear-gradientにて色を指定しているので、お好きな色で様々なボタンを使用可能です。
ガラス調のボタン
ガラスのように透過しているボタンです。
ホバーすると光沢が浮き出ます。
HTMLとCSSは以下になります。
<button class="c-button">ボタンです</button>.c-button {
text-align: center;
width: 150px;
height: 50px;
cursor: pointer;
border: none;
font-family: "Comfortaa", cursive;
color: rgba(255, 255, 255, 0.5);
font-size: 20px;
border-radius: 4px;
box-shadow:
inset 0px 3px 5px rgba(255, 255, 255, 0.5),
0px 0px 10px rgba(0, 0, 0, 0.15);
background: rgb(2, 0, 36);
background: linear-gradient(
45deg,
rgba(2, 0, 36, 0) 5%,
rgba(255, 255, 255, 0.5) 6%,
rgba(255, 255, 255, 0) 9%,
rgba(255, 255, 255, 0.5) 10%,
rgba(255, 255, 255, 0) 17%,
rgba(255, 255, 255, 0.5) 19%,
rgba(255, 255, 255, 0) 21%
);
background-size: 150%;
background-position: right;
transition: 1s;
}
.c-button:hover {
background-position: left;
color: white;
box-shadow:
inset 0px 3px 5px rgba(255, 255, 255, 1),
0px 0px 10px rgba(0, 0, 0, 0.25);
}
.c-button:focus {
outline: none;
}ホバー時の光沢はbox-shadowにて表現しています。
さいごに
今回は高級感のあるボタンを紹介しました！
ボタンのデザインはサイトのトンマナによって悩む要因にもなるかと思うので、
ぜひ今回紹介したボタンを試してみてください！
この記事を書いた人
