m's blog

備忘録とかメモとか

【CSS】付箋風ボタンをCSSで作ってみる!

【CSS】付箋風ボタンをCSSで作ってみる!

今回は、付箋風ボタンを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タグにbuttontagクラスを指定してください。

<a class="button tag">sample button</a>

実際の表示は、以下のような感じになります。

sample button

付箋っぽいボタンが表示できました!

クリックするとボタンが沈み込むので、試しにボタンをクリックしてみてください。

カスタムパターン

付箋の色を変えてみる!

まずは、付箋の色をいろいろ変えてみたいと思います。

ベースコードに、以下のような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-colorcolorを調整することで付箋の色を調整することができます。

ここでは、黄、青、紫、赤の色のパターンを追加してみました。

先ほどの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の設定を調整すれば、付箋を角丸にすることができます。

ここでは、4つの角を軽く滑らかにするものと、付箋の右側だけに丸みを帯びさせるスタイルを追加してみました。

実際に表示して確認してみます。

以下のように、aタグを記述してみてください。

<a class="button tag rounded">sample button</a>
<a class="button tag rounded-right">sample button</a>

表示は以下のような感じになります。

sample button sample button

角丸のボタンが表示されました。

わかりやすさのために、大きめに丸みを付けていますが、付箋ぽくないように感じる場合は、少し丸みを小さくしてみてください。

影の度合いを調整してみる!

最後に、box-shadow(とtransform)を調整して、影の度合いを調整してみます。

影薄めのバージョン、影濃いめの「影マシマシバージョン」の2パターンを試してみます。

影薄めバージョン

まずは、影薄めバージョンから。

以下のような、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>

実際の表示は、以下のような感じになります。

sample button

少し、影が薄くなっているのが見て取れると思います。

また、ボタンをクリックして、ボタンの沈み具合の違いも確認してみてください。

影マシマシバージョン

次に、「影マシマシ」カスタムをしてみたいと思います。

以下のような、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>

実際の表示は、以下の通りです。

sample button

影が大きくなっているのがわかると思います。

設定の通り、ボタンをクリックすると、深く沈みこむのが確認できると思います。

まとめ

以上、付箋風ボタンをCSSで作ってみました!

シンプルなコードなので、カスタムもそれほど難しくないと思います。

色や角丸以外にも簡単にカスタムできるので、いろいろ遊んでみてください!