.button {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  cursor: pointer;
  /* align content inside it */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
}

.button::before {
  @media (min-width: 768px) {
    content: 'San Francisco:';
  }

  @media (max-width: 767px) {
    content: 'SF:';
  }
}

