2022.09.16
グラデーションの角丸ボタンをcssで作ってみました

cssのみを使用してグラデーションの角丸のボタンを作ることはできないかを試してみました。

border-imageを使用した場合

See the Pen
Untitled
by kahsin0033 (@kashin0033)
on CodePen.

まず最初にborder-imageを使ってグラデーションの角丸ボタンを作ろうと思いましたが、
どうやらborder-imageにborder-radiusは効かないようです。
borderを使っての角丸ボタンを作るのは難しいと思い別の方法を試してみました。

backgroundを使用した場合

See the Pen
Untitled
by kahsin0033 (@kashin0033)
on CodePen.

backgroundのlinear-gradientを使いグラデーションを実装、
その中のdivに背景色の白を指定して擬似的に角丸ボタンを実装しました。
線の太さは一番外側のdivにpaddngを指定して調整しています。
ただ、内側と外側でborder-radiusの数値を調整しないと角丸の部分が太くなります。

まとめ

グラデーションの角丸ボタンを擬似的にですが作ることができました。
border-radiusの調整が必要などがありますがいろいろな表現に応用ができそうだなと思いました。

エンジニア / Shogo

Contact お問い合わせ

ご不明点、ご相談など
お気軽にご連絡ください。

011-522-8315

受付:9:00~18:00 ※土日祝除く