Кнопка градиентного призрака не работает на iOS safari - PullRequest
Новая
       13

Кнопка градиентного призрака не работает на iOS safari

0 голосов
/ 18 июня 2020

Надеюсь, здесь несколько простой вопрос, но что-то, о чем я уже давно бился головой. У меня есть кнопка-призрак градиента, которая работает как ссылка во всех браузерах и устройствах, но когда тот же класс применяется к a, она прерывается на iOS safari.

Вот код: https://codepen.io/Micmacs/pen/eYJBapm

<a href="contact.html"class="btn btn-primary">Link button</a>
<button class="btn btn-primary" id="my-form-button" type="submit">Button button</button>

//colors
$main-white:              #ECEFF6;
$main-black:              #363636;
$main-yellow:             #FFD301;
$main-orange:             #E95400;
$alt-white:               #FFFFFF;

$gradient: linear-gradient(90deg, $main-yellow 0%, $main-orange 100%);

.btn {
  font-family: 'Cera Pro Medium', 'Lato', sans-serif;
  font-size: 1rem;
  margin: 1em;
  color: transparent;
  letter-spacing: 2px;
  border-style: solid;
  border-width: 4px;
  border-image: $gradient;
  border-image-source: $gradient;
  border-image-slice: 1;
  background: $gradient;
  -webkit-background-clip: text;
  line-height: 1em;
  text-fill-color: transparent;
  // -webkit-text-fill-color: transparent;
  // -webkit-appearance: none;
  // -moz-appearance: none;
  // appearance: none;
  &:hover {
    background: $gradient;
    transition: all 0.8s ease;
    // border: 4px solid transparent;
  }
  &:focus {
    box-shadow: none;
    background: $gradient;
    transition: all 0.8s ease;
  }
}

Я в значительной степени исчерпал идеи с моей стороны, как заставить это работать!

У кого-нибудь есть идеи?

Ура!

...