・枠がグラデーション＋角丸のボタン実装方法を知りたい
・枠がグラデーションのボタン実装方法を知りたい
こんな疑問に答えます。
今回作ったのは以下のようなものです。
コードだけわかればいいという人は、以下のコードを参考に作成してみてください。
See the Pen Untitled by 森寅治 (@kaittmxx-the-typescripter) on CodePen.
このブログ「とらまるブログ」の運営者。2019年からエンジニアとしてサイト制作やシステム開発を行いつつ、ブログ情報発信を行っている。これまでのWeb制作実績は40件以上。
前提条件
・今回のボタン実装は、多くの場合、成功例パターン1で解決できると思います。
成功例パターン2で実装する場合の条件は以下になります。
・全体背景がグラデーション、複数色の場合で、ボタン背景を透過させて全体背景と合わせたい場合
条件によって確認してみてください。
成功例
パターン1(ボタン背景が透過不可)
ボタンの背景透過できない実装方法です。
作成したものは以下になります。
See the Pen Untitled by 森寅治 (@kaittmxx-the-typescripter) on CodePen.
擬似要素を使用して背景を重ねる方法になります。
・グラデーションの背景を擬似要素::beforeを使用して作成します。
.c-button-2::before{
position: absolute;
width: 100%;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #ccc6fd 0%, #9c00ff 100%); /* グラデーション背景 */
content: "";
z-index: 1;
}・ボタンの背景を擬似要素::afterで重ね、幅、高さからborderの幅を引いた値を指定する
.c-button-2::before{
position: absolute;
width: 100%;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #ccc6fd 0%, #9c00ff 100%); /* グラデーション背景 */
content: "";
z-index: 1;
}多くの場合はこちらの方法で実装できると思います。
この実装での問題は、ボタン背景が透過でないので、全体背景がグラデーションなどの場合に違和感が出てしまいます。
パターン2(ボタン背景が透過可能)
ボタンの背景透過できる実装方法です。
作成したものは以下になります。
See the Pen Untitled by 森寅治 (@kaittmxx-the-typescripter) on CodePen.
background-imageに、背景透過したボーダー画像で指定して実装する方法です。
重要な点は、画像を2倍で書き出すことです。1倍だと画像が少しぼやけてしまいます。
.c-button {
color: #fff;
display: block;
width: 348px;
height: 72px;
border-radius: 35px;
overflow: hidden;
background-image: url(指定画像); /* 背景透過したボーダー画像 */
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
background-color: transparent;
border: none;
}失敗例
今回のボタンを作成する際に、失敗した例を紹介します。
角丸のない枠線がグラデーションのボタンであれば、以下で実装できるので参考にしてみてください。
必要なければ飛ばしてください。
参考記事：https://note.com/toya_n/n/nca1b352fbe9df
ボタンが角丸にならない
失敗例はボタンの角が丸くならないパターンです。
作成したものは以下になります。
See the Pen Untitled by 森寅治 (@kaittmxx-the-typescripter) on CodePen.
cssのborde-imageに linear-gradientをつかってグラデーション枠をつけることができます。
しかしこの方法だと、border-imageにborder-radiusがきかないため角に丸みをつけることができませんでした。
.c-button {
width: 348px;
height: 72px;
border: 2px solid #ccc6fd;
border-image: linear-gradient(90deg, #ccc6fd 0%, #9c00ff 100%);
border-image-slice: 1;
text-decoration: none;
border-radius: 35px; /* 反映されない */
}
コメント