CSS Buttons

by sturobson

HTML

<div id="lines" class="btn"></div>

<div id="dots" class="btn"></div>

<div id="arrow" class="btn"></div>

<div id="point" class="btn"></div>

<div id="menu-word" class="btn"></div>

<div id="round-arrow" class="btn btn-rnd"></div>

<div id="round-point" class="btn btn-rnd"></div>

CSS

body { margin: 3%; }
.btn { 
    position: relative;         
    margin-right:2%; 
    border: 2px solid black;
    border-radius: 2px; 
    height: 36px; 
    width:36px; 
float: left;        
}
.btn-rnd { border-radius: 50px; background: red; border-color: red; }

#lines:before { position: absolute; content:""; border-top: 6px solid black; border-bottom: 17px double black; height: 5px; width:30px; top: 4px; right:3px; }

#dots:before { position: absolute; content:""; border-top: 6px solid black; border-bottom: 17px double black; height: 5px; width:30px; top: 4px; right:3px; }
#dots:after { position: absolute; content:""; border-left: 6px solid white; border-right: 6px solid white; height: 28px; width:6px; top: 4px; left:9px; }
#arrow:before { position: absolute; content:""; top: 11px; left:1px; border-left: 16px solid rgba(255, 255, 255, 0); border-right: 16px solid rgba(255, 255, 255, 0); border-top: 16px solid black; }
#point:before { position: absolute; content:""; top: 11px; left:1px; border-left: 16px solid rgba(255, 255, 255, 0); border-right: 16px solid rgba(255, 255, 255, 0); border-top: 16px solid black; } 
#point:after { position: absolute; content:""; top: 3px; left:1px; border-left: 16px solid rgba(255, 255, 255, 0); border-right: 16px solid rgba(255, 255, 255, 0); border-top: 16px solid white; }
#menu-word:before { content: "menu"; position: absolute; left:2px; top:10px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px; font-weight: bold; }

#round-arrow:before { position: absolute; content:""; top: 11px; left:2px; border-left: 16px solid rgba(255, 255, 255, 0); border-right: 16px solid rgba(255, 255, 255, 0); border-top: 16px solid black; }

#round-point:before { position: absolute; content:""; top: 13px; left:1px; border-left: 16px solid rgba(255, 255, 255, 0); border-right: 16px solid rgba(255, 255, 255, 0); border-top: 16px solid black; } 
#round-point:after { position: absolute; content:""; top: 6px; left:1px;...