Effets de pression

dabblet.css

/**
 * Effets de pression
 */

.menu {
  margin: 1em 0;
  padding: 0;
}
.menu-item {
  display: -moz-inline-box; display: inline-block; *display: inline; *zoom: 1;
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu-btn {
  background: linear-gradient(top, #FEFEFE, #EEE);
  color: #444;
  display: block;
  padding: .5em 1em;
  text-decoration: none;
  text-shadow: 0 1px #FFF;
}

dabblet.html

<ul class="menu">
       <li class="menu-item"><a class="menu-btn" href="#">Button 1</a>
  </li><li class="menu-item"><a class="menu-btn" href="#">Button 2</a>
  </li><li class="menu-item"><a class="menu-btn" href="#">Button 3</a>
  </li><li class="menu-item"><a class="menu-btn" href="#">Button 4</a>
  </li><li class="menu-item"><a class="menu-btn" href="#">Button 5</a></li>
</ul>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}