
div要素ひとつだけでメニューボタンのアイコンをつくる
2014年12月3日CSSテクニック
レスポンシブ・ウェブデザイン化の流れとともに、メニューやナビゲーションを表示するボタンとして定着した3本線のアイコンをdivひとつだけで作りました。
HTML
<div id="menuBtn"></div>
CSS
#menuBtn { position: relative; width: 40px; height: 36px; margin: 0 auto; cursor: pointer; } #menuBtn:before { content: ""; position: absolute; border-top: 6px solid #52d3ff; border-bottom: 22px double #52d3ff; width: 40px; height: 8px; } #menuBtn:hover:before { border-color: #5d5d5d; }