cool touch buttons
saw them in this video - http://vimeo.com/17631561
HTML
<div id="grid">
<div class="column push">
<a href="#" class="outline short pointLeft">main</a>
<a href="#" class="outline tall pointRight">sub</a>
</div>
<div class="column">
<a href="#" class="filled tall pointRight alignRight">main</a>
<a href="#" class="filled short pointLeft alignRight">sub</a>
</div>
<div class="column">
<a href="#" class="filled tall pointLeft">main</a>
<a href="#" class="filled short pointRight">sub</a>
</div>
</div>
CSS
@font-face {
font-family: 'Orbitron';
font-style: normal;
font-weight: 900;
src: local('Orbitron-Black'), url('http://themes.googleusercontent.com/font?kit=FyvTORElv6iWeP2Jf9yG3Z0EAVxt0G0biEntp43Qt6E') format('truetype');
}
body{
background-color:#2b2b29;
font-family: 'Orbitron', arial, sans;
font-size:16px;
}
a{
text-decoration:none;
color:#eee;
display:block;
margin-top:3px;
padding:2px;
}
.column{
width:80px;
float:left;
margin-left:3px;
}
.outline{
background-color:#2b2b29;
border: 2px #ccc solid;
}
.outline:hover{
border: 2px #fff solid;
color:#fff;
}
.filled{
background-color:#7bcaf7;
border: 2px #7bcaf7 solid;
color:#2b2b29;
}
.filled:hover{
background-color:#94d3f7;
border: 2px #94d3f7 solid;
}
.short{
height:50px;
}
.tall{
height: 150px;
}
div a:nth-child(odd){
display:table-cell;
vertical-align:bottom;
width:inherit;
}
.pointLeft{
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 0px;
border-top-left-radius: 15px;
border-top-right-radius: 0px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 0px;
}
.pointRight{
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 15px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 15px;
border-top-left-radius: 0px;
border-top-right-radius: 15px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 15px;
}
.alignRight{
text-align:right;
}
.push{
margin-right:12px;
}