CSSでツムツム風の縫い目付きボタンを作ってみた
【追記 ()：Flexbox（フレキシブルボックスレイアウト）対応ブラウザが増えてきたので、Flexboxを使ったCSSに一部を大幅変更しました。】
今回はCSSの話です。
みなさんは「ツムツム」というゲームをご存知ですか？
ツムツムとはツムツムと呼ばれるぬいぐるみをつないで消していくパズルゲームなんですが
そのゲームはぬいぐるみを基調としているため、ボタンなどゲーム画面がフェルトを縫い付けたようなデザインなんです。
そのデザインをCSSで作ってみるというのが、今回の記事です。
スポンサーリンク
というのも、私自身がborderのdashedが私はけっこう好きで、それを活かせないかなと思っていたのです。
そんなときに、たまたまこのゲームをしていて、その時に思いついた、という話なんです。
では、とりあえず出来上がったものをご紹介します。
シンプルなデザイン
まずは簡単にシンプルなデザインのものを作りました。
今のサイトデザインはフラットデザインが多いので、こういった感じの方が合いそうです。
画像は各ブラウザごとでの表示をスクリーンショットで収めたものです。画像では分かりにくいですが、大なり小なり違いがあります。ChromeとOperaは表示がまったく同じなので、まとめました。ブラウザのバージョンはこの画像製作時（2017年4月7日）において全て最新のバージョンです。*1
わたしはMacを持っていませんので、Safariの表示は確認できませんでした。
ブラウザ自体からの表示を確認するため、表示サンプル用のページも作っています。Safariや細かいデザインを確認される場合には、そのリンク先で確認することができます。
リンク：サンプルページ
このデザインのCSSはこちらになります。
.stitch-button-o {
background: #ffaa00;
border: 1px #ffff00 dashed;
border-radius: 2.5em;
box-shadow: 0 0 0 4px #ffaa00;
color: #aa4400;
display: inline-block;
height: 2.5em;
line-height: 2.5;
margin: 4px;
padding: 0;
text-align: center;
text-decoration: none;
width: 10em;
}
borderのdashedが縫い目のようにも見えるので、それを使っい、その周りをbox-shadowで被い、外側を補っています。
色や形を変えたら、いろんなデザインのものが作れます。
いくつか作ったので、それらもご紹介します。
四角形
リンク：サンプルページ
四角形です。四隅は少しだけ丸くしています。
.stitch-button-r {
background: #ff3333;
border: 1px #ffaaaa dashed;
border-radius: 0.5em;
box-shadow: 0 0 0 4px #ff3333;
color: #880000;
display: inline-block;
height: 2.5em;
line-height: 2.5;
margin: 4px;
padding: 0;
text-align: center;
text-decoration: none;
width: 10em;
}
楕円・円
リンク：サンプルページ
楕円です。縦横の長さを同じにすると円になります。
.stitch-button-g {
background: #33ff33;
border: 1px #009900 dashed;
border-radius: 50%;
box-shadow: 0 0 0 4px #33ff33;
color: #006600;
display: inline-block;
height: 3em;
line-height: 3;
margin: 4px;
padding: 0;
text-align: center;
text-decoration: none;
width: 10em;
}
半円
リンク：サンプルページ
半円です。こちらは下半円ですが
.stitch-button-b {
background: #00aaff;
border: 1px #0000ff dashed;
border-radius: 5% 5% 3.5em 3.5em;
box-shadow: 0 0 0 4px #00aaff;
color: #0000aa;
display: inline-block;
height: 3.5em;
line-height: 3;
margin: 4px;
padding: 0;
text-align: center;
text-decoration: none;
width: 7em;
}
オリジナル
border-radiusをいろいろ変えて、こんな形を作ってみました。
リンク：サンプルページ
.stitch-button-br {
background: #993300;
border: 1px #ffffff dashed;
border-radius: 20% 80% 80% 20%/ 30% 60% 40% 70%;
box-shadow: 0 0 0 4px #993300;
color: #331100;
display: inline-block;
height: 3em;
line-height: 3.1;
margin: 4px;
padding: 0;
text-align: center;
text-decoration: none;
width: 8em;
}
全てのデザインにはmarginが4pxほど設定されています。これはbox-shadowが影故に高さや横幅には含まれないため、デザインがずれる可能性を避けるためです。
影付き
また、これらに影を付けたい場合は、こちらです。
リンク：サンプルページ
.stitch-button-osh {
background: #ffaa00;
border: 1px #ffff00 dashed;
border-radius: 2.5em;
box-shadow: 0 0 0 4px #ffaa00,
0 1px 3px 4px rgba(0,0,0,0.8);
color: #993300;
display: inline-block;
height: 2.5em;
line-height: 2.5;
margin: 4px;
padding: 0;
text-align: center;
text-decoration: none;
width: 10em;
}
box-shadowは複数指定できるので、それを利用して設定します。ただし、先に設定したbox-shadow外側周りの縁（ふち）で使用していますので、影を付ける場合は、その外側の縁の分を余分に「広がり」を設定しなくては、うまく表示できません。
上の画像のように数値をそろえることで、影を付けることができます。
スポンサーリンク
より凝ったデザイン
前述のもはシンプルなデザインですが、ツムツム風とは程遠いです。これらに更に陰影の濃淡を装飾していって、いい感じに仕上げていきたいと思います。
できたものが、こちらです。
リンク：サンプルページ
box-shadowで表していた外側をborderに直し、:before と:afterの疑似要素を使ってborder:dashedや陰影を施しました。
.felt-button-o {
background: #ffaa00;
border: 3px #ffcc00 solid;
border-radius: calc( 2.5em + 4px);
box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.5);
color: #993300;
display: inline-flex;
align-items: center;
justify-content: center;
height: calc( 2.5em + 4px);
margin: 0;
padding: 0;
position: relative;
text-decoration: none;
text-shadow: 0 1px 2px #ffdd00;
width: calc( 10em + 4px);
}
.felt-button-o::before {
border-radius: calc( 2.5em + 10px);
box-shadow: 0 0 2px #ff9900 inset;
content: "";
height: calc( 2.5em + 10px);
position: absolute;
left: -3px;
top: -3px;
width: calc( 10em + 10px);
}
.felt-button-o::after {
border: 1px #ffee00 dashed;
border-radius: 2.5em;
box-shadow: 0 0 2px 1px #ff9900,
0 2px 1px #ff9900 inset,
0 -4px 4px #ff9900 inset;
content: "";
height: 2.5em;
position: absolute;
left: 1px;
top: 1px;
width: 10em;
}
より質感を出すためにtext-shadowも設定しています。文字がいらない場合は不要ですが。
このような感じで、前述のデザイン全部にも施してみました。
四角形
リンク：サンプルページ
.felt-button-r {
background: #ff3333;
border: 3px #ff5555 solid;
border-radius: calc( 0.5em + 4px);
box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.5);
color: #880000;
display: inline-flex;
align-items: center;
justify-content: center;
height: calc( 2.5em + 4px);
margin: 0;
padding: 0;
position: relative;
text-decoration: none;
text-shadow: 0 1px 2px #ff7777;
width: calc( 10em + 4px);
}
.felt-button-r::before {
border-radius: calc( 0.5em + 10px);
box-shadow: 0 0 2px #dd3333 inset;
content: "";
height: calc( 2.5em + 10px);
position: absolute;
left: -3px;
top: -3px;
width: calc( 10em + 10px);
}
.felt-button-r::after {
border: 1px #ffaaaa dashed;
border-radius: 0.5em;
box-shadow: 0 0 2px 1px #dd3333,
0 2px 1px #dd3333 inset,
0 -4px 4px #dd3333 inset;
content: "";
height: 2.5em;
position: absolute;
left: 1px;
top: 1px;
width: 10em;
}
楕円・円
リンク：サンプルページ
.felt-button-g {
background: #33ff33;
border: 3px #55ff55 solid;
border-radius: 50%;
box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.5);
color: #006600;
display: inline-flex;
align-items: center;
justify-content: center;
height: calc( 3em + 4px);
margin: 0;
padding: 0;
position: relative;
text-decoration: none;
text-shadow: 0 1px 2px #77ff77;
width: calc( 10em + 4px);
}
.felt-button-g::before {
border-radius: 50%;
box-shadow: 0 0 2px #00cc00 inset;
content: "";
height: calc( 3em + 10px);
position: absolute;
left: -3px;
top: -3px;
width: calc( 10em + 10px);
}
.felt-button-g::after {
border: 1px #009900 dashed;
border-radius: 50%;
box-shadow: 0 0 2px 1px #00cc00,
0 2px 1px #00cc00 inset,
0 -4px 4px #00cc00 inset;
content: "";
height: 3em;
position: absolute;
left: 1px;
top: 1px;
width: 10em;
}
半円
リンク：サンプルページ
.felt-button-b {
background: #00aaff;
border: 3px #00ccff solid;
border-radius: 5% 5% calc( 3.5em + 4px) calc( 3.5em + 4px);
box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.5);
color: #0000aa;
display: inline-flex;
align-items: center;
justify-content: center;
height: calc( 3.5em + 4px);
margin: 0;
padding: 0;
position: relative;
text-decoration: none;
text-shadow: 0 1px 2px #00ddff;
width: calc( 7em + 4px);
}
.felt-button-b::before {
border-radius: 5% 5% calc( 3.5em + 10px) calc( 3.5em + 10px);
box-shadow: 0 0 2px #0088ff inset;
content: "";
height: calc( 3.5em + 10px);
position: absolute;
left: -3px;
top: -3px;
width: calc( 7em + 10px);
}
.felt-button-b::after {
border: 1px #0000ff dashed;
border-radius: 5% 5% 3.5em 3.5em;
box-shadow: 0 0 2px 1px #0088ff,
0 2px 1px #0088ff inset,
0 -4px 4px #0088ff inset;
content: "";
height: 3.5em;
position: absolute;
left: 1px;
top: 1px;
width: 7em;
}
オリジナル
リンク：※サンプルページ
.felt-button-br {
background: #993300;
border: 3px #bb5522 solid;
border-radius: 20% 80% 80% 20%/ 30% 60% 40% 70%;
box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.5);
color: #331100;
display: inline-flex;
align-items: center;
justify-content: center;
height: calc( 3em + 4px);
margin: 0;
padding: 0;
position: relative;
text-decoration: none;
text-shadow: 0 1px 2px #cc9933;
width: calc( 8em + 4px);
}
.felt-button-br::before {
border-radius: 20% 80% 80% 20%/ 30% 60% 40% 70%;
box-shadow: 0 0 2px #772200 inset;
content: "";
height: calc( 3em + 10px);
position: absolute;
left: -3px;
top: -3px;
width: calc( 8em + 10px);
}
.felt-button-br::after {
border: 1px #ffffff dashed;
border-radius: 20% 80% 80% 20%/ 30% 60% 40% 70%;
box-shadow: 0 0 2px 1px #772200,
0 2px 1px #772200 inset,
0 -4px 4px #772200 inset;
content: "";
height: 3em;
position: absolute;
left: 1px;
top: 1px;
width: 8em;
}
どのように使うか
これらをどのように使うかといえば、はてなブログで言えば【プロフィール】といったサイドバーの見出しや、記事本文に書くh2やh3といった見出しなどとかです。
仮にプロフィールのデザインとして使う場合、CSSはこんな感じで設定すればよいでしょう。
.hatena-module-title {
background: #ffaa00;
border: 1px #ffff00 dashed;
border-radius: 2.5em;
box-shadow: 0 0 0 4px #ffaa00;
color: #993300;
height: 2.5em;
line-height: 2.5;
margin: 4px;
padding: 0;
text-align: center;
text-decoration: none;
width: 10em;
}
プロフィールの見出しはdiv要素なので、display: inline-block;などは記述していません。これらはケースバイケースで変えたり消したりしていただけたら、よいかと思います。
他に使えるところとしては【続きを読む】といった、実際にボタンのデザインとして使う方法も考えられます。
下のCSSは【続きを読む】に凝ったツムツム風ボタンのデザインを適応させる一例です。このCSSは、よりツムツム風に近づけるためにマウスを乗っけたり押したりすると拡大縮小するように設定しています。
.entry-see-more {
background: #ffaa00;
border: 3px #ffcc00 solid;
border-radius: calc( 2.5em + 4px);
box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.5);
color: #993300;
display: inline-flex;
align-items: center;
justify-content: center;
height: calc( 2.5em + 4px);
margin: 0;
padding: 0;
position: relative;
text-decoration: none;
text-shadow: 0 1px 2px #ffdd00;
transition: all 0.1s ease;
width: calc( 10em + 4px);
}
.entry-see-more::before {
border-radius: calc( 2.5em + 10px);
box-shadow: 0 0 2px #ff9900 inset;
content: "";
height: calc( 2.5em + 10px);
position: absolute;
left: -3px;
top: -3px;
width: calc( 10em + 10px);
}
.entry-see-more::after {
border: 1px #ffee00 dashed;
border-radius: 2.5em;
box-shadow: 0 0 2px 1px #ff9900,
0 2px 1px #ff9900 inset,
0 -4px 4px #ff9900 inset;
content: "";
height: 2.5em;
position: absolute;
left: 1px;
top: 1px;
width: 10em;
}
.entry-see-more:hover {
text-decoration: none;
transform: scale( 1.1, 1.1)
}
.entry-see-more:active {
text-decoration: none;
transform: scale( 0.9, 0.9)
}
/*
スマホなどのタッチデバイスでは
他の場所をタッチしないとhoverが解除されないので
それを無くすためのメディアクリエです。
【続きを読む】の場合では必要ないかもしれません。
@media (max-width: 768px) {
.button-push:hover {
transform: scale( 1, 1)
}
.button-push:active {
transform: scale( 0.8, 0.8)
}
}
*/
実際の挙動はサンプルページのサンプルでご確認ください。
こんな感じですが、ブログのカスタマイズでどこかに使えたらいいかもと思い作ってみました。
ご参考になれば幸いです。
スポンサーリンク
