fix background clip text for safari

Author: inorganik

src/app/login/login.component.html

@@ -9,7 +9,7 @@ <h2 class="text-muted">Please Login</h2>
             <p *ngIf="showError('email')" class="text-danger text-left small">Please enter a valid email.</p>
           </div>
           <button type="submit" class="btn btn-primary d-block mx-auto mt-5 mb-3"><img src="assets/lock.svg" width="20" class="mr-3">Login</button>
-          <button type="button" class="btn btn-secondary d-block mx-auto mt-2" [routerLink]="['/register']">Register</button>
+          <a class="btn btn-secondary d-inline-block mx-auto mt-2" [routerLink]="['/register']">Register</a>
         </form>
         <div *ngIf="error" class="alert alert-danger text-left" role="alert">{{ error }}</div>
       </div>

src/app/register/register.component.html

@@ -12,8 +12,8 @@ <h2 class="text-muted">Register</h2>
             <input type="text" class="form-control" formControlName="name" placeholder="Name" autocomplete="off" [ngClass]="{ 'is-invalid': showError('name') }">
             <p *ngIf="showError('name')" class="text-danger text-left small">Please enter a name.</p>
           </div>
-          <button type="submit" class="btn btn-primary mt-3"><img src="assets/lock.svg" width="20" class="mr-3">Submit</button>
-          <button type="button" class="btn btn-secondary d-block mx-auto mt-2" [routerLink]="['/login']">Login</button>
+          <button type="submit" class="btn btn-primary d-block mx-auto mt-3 mb-3"><img src="assets/lock.svg" width="20" class="mr-3">Submit</button>
+          <a class="btn btn-secondary d-inline-block mx-auto mt-2" [routerLink]="['/login']"><span>Login</span></a>
         </form>
         <div *ngIf="error" class="alert alert-danger text-left" role="alert">{{ error }}</div>
       </div>

src/scss/styles.scss

@@ -8,9 +8,9 @@ h1 {
 
 @mixin gradient() {
   // colorzilla.com/gradient-editor/#9cf253+0,09d3ff+100
-  background: -moz-linear-gradient(-45deg,  #9cf253 0%, #09d3ff 100%);
-  background: -webkit-linear-gradient(-45deg,  #9cf253 0%,#09d3ff 100%);
-  background: linear-gradient(135deg,  #9cf253 0%,#09d3ff 100%);
+  background-image: -moz-linear-gradient(-45deg,  #9cf253 0%, #09d3ff 100%);
+  background-image: -webkit-linear-gradient(-45deg,  #9cf253 0%,#09d3ff 100%);
+  background-image: linear-gradient(135deg,  #9cf253 0%,#09d3ff 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9cf253', endColorstr='#09d3ff',GradientType=1 );
 }
 
@@ -20,11 +20,9 @@ h1 {
 }
 
 .btn-secondary {
-  background: white;
-  color: $fallback;
   @include gradient();
   -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
+  color: transparent !important;
 }
 
 .text-muted {