今回は、付箋風ボタンをCSSで作る方法を紹介したいと思います！
最初に、ベースとなるCSSコードを紹介した後、簡単なカスタムパターンをいくつか紹介していきます。
目次
ベースコード
付箋風のボックスは以下のようなCSSで実現することができます。
.button.tag { display: inline-block; text-decoration: none; padding: 0.5rem; background: #f7f7f7; border-left: solid 6px #58ad5a; color: #58ad5a; font-weight: bold; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.22); } .button.tag:active { box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.11); transform: translateY(2px); }
使い方
付箋風ボタンを利用する場合は、対象のHTMLタグにbuttonとtagクラスを指定してください。
<a class="button tag">sample button</a>
実際の表示は、以下のような感じになります。
付箋っぽいボタンが表示できました！
クリックするとボタンが沈み込むので、試しにボタンをクリックしてみてください。
カスタムパターン
付箋の色を変えてみる！
まずは、付箋の色をいろいろ変えてみたいと思います。
ベースコードに、以下のようなCSSコードを追加します。
.button.yellow { border-left-color: #efcc4c; color: #efcc4c; } .button.blue { border-left-color: #5bb1fc; color: #5bb1fc; } .button.purple { border-left-color: #7e5bfc; color: #7e5bfc; } .button.red { border-left-color: #ff3c3c; color: #ff3c3c; }
border-left-colorとcolorを調整することで付箋の色を調整することができます。
ここでは、黄、青、紫、赤の色のパターンを追加してみました。
先ほどのaタグも調整して、各色に対応するクラスを追加してみます。
<a class="button tag yellow">sample button</a> <a class="button tag blue">sample button</a> <a class="button tag purple">sample button</a> <a class="button tag red">sample button</a>
表示は以下のような感じになります。
sample button sample button sample button sample button
黄、青、紫、赤の付箋風ボタンが表示されました。
色の調整は、シンプルな内容なので、いろいろ変化させて遊んでみてください。
角丸表示にしてみる！
次に、角丸表示にしてみます。
以下のようなCSSコードを追加します。
.button.rounded { border-radius: 4px; } .button.rounded-right { border-radius: 0 8px 8px 0; }
border-radiusの設定を調整すれば、付箋を角丸にすることができます。
ここでは、４つの角を軽く滑らかにするものと、付箋の右側だけに丸みを帯びさせるスタイルを追加してみました。
実際に表示して確認してみます。
以下のように、aタグを記述してみてください。
<a class="button tag rounded">sample button</a> <a class="button tag rounded-right">sample button</a>
表示は以下のような感じになります。
角丸のボタンが表示されました。
わかりやすさのために、大きめに丸みを付けていますが、付箋ぽくないように感じる場合は、少し丸みを小さくしてみてください。
影の度合いを調整してみる！
最後に、box-shadow（とtransform）を調整して、影の度合いを調整してみます。
影薄めのバージョン、影濃いめの「影マシマシバージョン」の２パターンを試してみます。
影薄めバージョン
まずは、影薄めバージョンから。
以下のような、CSSコードを追加してください。
.button.light-shadow { box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.14); } .button.light-shadow:active { box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.07); transform: translateY(1px); }
box-shadowを調整して、影の大きさと濃さを調整しています。
transformでは、影の調整に併せて、ボタンを押したときの沈み具合を少し小さくしています。
実際に表示して確認するために、以下のように、aタグを記述してみてください。
<a class="button tag light-shadow">sample button</a>
実際の表示は、以下のような感じになります。
少し、影が薄くなっているのが見て取れると思います。
また、ボタンをクリックして、ボタンの沈み具合の違いも確認してみてください。
影マシマシバージョン
次に、「影マシマシ」カスタムをしてみたいと思います。
以下のような、CSSコードを追加してください。
.button.heavy-shadow { box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.3); } .button.heavy-shadow:active { box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.15); transform: translateY(3px); }
「影薄めバージョン」と同様に、box-shadowを調整して、影の大きさと濃さを調整しています。
transformは、「影薄めバージョン」とは反対に、ボタンを押したときの沈み具合を少し大きくしています。
実際に表示して確認してみます。
以下のように、aタグにheavy-shadowクラスを追加してください。
<a class="button tag heavy-shadow">sample button</a>
実際の表示は、以下の通りです。
影が大きくなっているのがわかると思います。
設定の通り、ボタンをクリックすると、深く沈みこむのが確認できると思います。
まとめ
以上、付箋風ボタンをCSSで作ってみました！
シンプルなコードなので、カスタムもそれほど難しくないと思います。
色や角丸以外にも簡単にカスタムできるので、いろいろ遊んでみてください！
