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

.button {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: rgb(20, 20, 20);
  border: none;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.164);
  cursor: pointer;
  transition-duration: .3s;
  overflow: hidden;
  position: relative;
}

.svgIcon {
  width: 12px;
  transition-duration: .3s;
}

.svgIcon path {
  fill: white;
}

.button:hover {
  width: 140px;
  border-radius: 50px;
  transition-duration: .3s;
  background-color: rgb(255, 69, 69);
  align-items: center;
}

.button:hover .svgIcon {
  width: 50px;
  transition-duration: .3s;
  transform: translateY(60%);
}

.button::before {
  position: absolute;
  top: -20px;
  content: "حذف";
  color: white;
    font-family: IRANSans;

  transition-duration: .3s;
  font-size: 2px;
}

.button:hover::before {
  font-size: 13px;
  opacity: 1;
  transform: translateY(30px);
  transition-duration: .3s;
}