CSS3 slide Button

HTML Source

<div class="button">
  <a href="#">
    <img src="home.png" width="32" height="32" /><span>Home</span>
  </a>
</div>

CSS Source

Wichtig: Viele neue Browser brauchen noch ein Präfix damit alle Funktionen richtig umgesetzt wird.

.button {
  position:relative;
  height: 50px;
  width: 50px;
  margin:10px 0;
  padding:7px 0 0 8px;
  border: 1px solid #898989;
  background:#ddd;
  box-shadow: -12px 12px 8px -10px #888, 
  -6px -10px 20px rgba(0,0,0,0.3)  inset;
  overflow:hidden;
  transition:width 1s ease-in-out;
  box-sizing: padding-box;
  box-sizing:border-box;
 border-radius:25px;
 }

.button:hover {
  width: 170px;
  box-shadow: -12px 12px 8px -10px #333,
  -6px -10px 20px rgba(0,0,0,0.3)  inset;
  background:#ebf6f7;
  }
	
.button span{ 
  opacity:0;
  position:absolute;
  top:14px;
  left:58px;
  transition:opacity 1s  linear 0.5s;
  }

.button:hover span { opacity:1; }

.button a {
  color:#000;
  font-weight:bold;
  text-shadow: 0 2px 3px #898989;
  }