@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;
  direction: rtl;
    background-color: black;
  }
.something {
 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px;

}

button {
 position: relative;
 overflow: hidden;
 outline: none;
 cursor: pointer;
 border-radius: 50px;
 background-color: hsl(255deg 50% 40%);
 border: solid 4px hsl(50deg 100% 50%);
 font-family: inherit;
}

.default-btn,.hover-btn {
 background-color: hsl(255deg 50% 40%);
 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
 align-items: center;
 gap: 15px;
 padding: 15px 20px;
 border-radius: 50px;
 font-size: 17px;
 font-weight: 500;
 text-transform: uppercase;
 transition: all .3s ease;
}

.hover-btn {
 position: absolute;
 inset: 0;
 background-color: hsl(255deg 50% 49%);
 transform: translate(0%,100%);
}

.default-btn span {
 color: hsl(0, 0%, 100%);
}

.hover-btn span {
 color: hsl(50deg 100% 50%);
}

button:hover .default-btn {
 transform: translate(0%,-100%);
}

button:hover .hover-btn {
 transform: translate(0%,0%);
}