@font-face {
font-family: 'IRANSans';
src: url('../fonts/IRANSans-web.eot');
src: url('../fonts/IRANSans-web.eot?#iefix') format('embedded-opentype'),
url('../fonts/IRANSans-web.woff2') format('woff2'),
url('../fonts/IRANSans-web.woff') format('woff'),
url('../fonts/IRANSans-web.ttf') format('truetype');
font-weight: normal;
}

body{
  font-family: IRANSans;
 
    background-color: #e8e8e8;
  }
.something {
 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px;

}



button {
  font-family: IRANSans;
 width: 150px;
 height: 50px;
 cursor: pointer;
 display: flex;
 align-items: center;
 background: red;
 border: none;
 border-radius: 5px;
 box-shadow: 1px 1px 3px rgba(0,0,0,0.15);
 background: #e62222;
}

button, button span {
 transition: 200ms;
}

button .text {
 transform: translateX(35px);
 color: white;
 font-weight: bold;
}

button .icon {
 position: absolute;
 border-left: 1px solid #c41b1b;
 transform: translateX(110px);
 height: 40px;
 width: 40px;
 display: flex;
 align-items: center;
 justify-content: center;
}

button svg {
 width: 15px;
 fill: #eee;
}

button:hover {
 background: #ff3636;
}

button:hover .text {
 color: transparent;
}

button:hover .icon {
 width: 150px;
 border-left: none;
 transform: translateX(0);
}

button:focus {
 outline: none;
}

button:active .icon svg {
 transform: scale(0.8);
}