フラットなボタンが欲しくなって、はじめは イラストレーター で作ってSVGで書き出そうと思っていたのですが、僕のイラレスキルだと、CSSで作ってしまった方が手っ取り早かったので、CSSでさささっとつくってみました。
DEMO
ソースコード
HTML
<div class="btn"> <div class="top"> <div class="top-top"></div> <div class="top-bottom"></div> </div> <div class="bottom"> <div class="bottom-top"></div> <div class="bottom-bottom"></div> </div> </div>
SCSS
* { box-sizing: border-box; } .btn { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 400px; height: 324px; } .top { position: relative; left: 40px; z-index: 1; cursor: pointer; &:hover { .top-top { top: 52px; &:before { height: 0; } &:after { height: 0; } } } } .top-top { display: block; position: relative; top: 0; border-radius: 50%; border: solid 24px #000; width: 320px; height: 180px; background: #E53935; z-index: 1; transition: all .2s ease-in-out; &:before { display: block; position: absolute; left: -24px; top: 50%; width: 24px; height: 48px; content: ''; background: #000; transition: height .2s ease-in-out; } &:after { display: block; position: absolute; right: -24px; top: 50%; width: 24px; height: 48px; content: ''; background: #000; transition: height .2s ease-in-out; } } .top-bottom { display: block; position: absolute; top: 52px; border-radius: 50%; border: solid 24px #000; width: 320px; height: 180px; background: #D32F2F; } .bottom { position: absolute; top: 48px; z-index: 0; } .bottom-top { display: block; position: relative; border-radius: 50%; border: solid 24px #000; width: 400px; height: 225px; background: #FDD835; z-index: 1; &:before { display: block; position: absolute; left: -24px; top: 50%; width: 24px; height: 52px; content: ''; background: #000; } &:after { display: block; position: absolute; right: -24px; top: 50%; width: 24px; height: 52px; content: ''; background: #000; } } .bottom-bottom { display: block; position: absolute; top: 52px; border-radius: 50%; border: solid 24px #000; width: 400px; height: 225px; background: #FBC02D; }
かなり愚直に書きました。
擬似要素をもっと上手く使ったり、ドロップシャドウを使ったりすれば、もっとシンプルなHTMLにできるような気もしますが、デザインと同時に進めたかったので、サイズや位置の調整のしやすさを優先しました。