.button-1 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.3rem;              /* 28px */
  height: 3rem;                /* 50px */
  border-radius: 0.9375rem;        /* 15px */
  border: none;
  font-family: "Roboto", Arial, sans-serif;
  font-size: 1rem;                 /* 16px */
  font-weight: 500;
  letter-spacing: 0.03125rem;      /* 0.5px */
  cursor: pointer;
  user-select: none;

  background: linear-gradient(135deg, #ff009a 15%, #d01bf7 100%);
  color: #fff;

  box-shadow: 0 0.25rem 0.375rem rgba(0,0,0,0.15);   /* 4px 6px */
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.button-1:hover {
  transform: translateY(-0.125rem);                 /* -2px */
  box-shadow: 0 0.375rem 0.75rem rgba(0,0,0,0.2);   /* 6px 12px */
}

.button-1:active {
  transform: translateY(0.0625rem);                 /* 1px */
  box-shadow: 0 0.1875rem 0.375rem rgba(0,0,0,0.15); /* 3px 6px */
}

.button-1:focus {
  outline: none;
  box-shadow: 0 0 0 0.1875rem rgba(255,0,154,0.4);   /* 3px */
}

.button-1:disabled {
  background: #b0b0b0;
  color: #666;
  cursor: not-allowed;
  box-shadow: none;
}