CSS Slider Button Code Schnipsel Slide effekt von rechts nach links ändern

<style>
.button {
  position: absolute;
  height: 50px;
  width: 50px;
  margin:10px 0;
  padding:7px 0 0 8px;
  border: 1px solid #898989;
  background:#dae9b4;
  overflow:hidden;
  transition:width 1s ease-in-out;
  box-sizing: padding-box;
  box-sizing:border-box;
  border-radius:25px;
 }


.button:hover {
  width: 170px;
  background:#dae9b4;
  }

.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;
  }
</style>
<div class="button">
  <a href="#">
    <img src="foto.png" width="32" height="32" /><span>Text</span>
  </a>
</div>