From d2124b711fd1393ee63f1835395d675fea5c510c Mon Sep 17 00:00:00 2001
From: Eric <eashaw@sailsjs.com>
Date: Thu, 20 Apr 2023 13:30:12 -0500
Subject: [PATCH] Website: Update button styles (#10699)

Changes:
- Updated the bootstrap overrides for `btn-info` and `btn-primary`
button styles.
- Removed the text underline from the buttons on landing pages
---
 .../assets/styles/bootstrap-overrides.less    | 49 ++++++++++++++++---
 website/assets/styles/pages/compliance.less   |  1 +
 website/assets/styles/pages/homepage.less     |  3 +-
 .../styles/pages/imagine/unused-software.less |  1 +
 .../styles/pages/osquery-management.less      |  1 +
 5 files changed, 45 insertions(+), 10 deletions(-)

diff --git a/website/assets/styles/bootstrap-overrides.less b/website/assets/styles/bootstrap-overrides.less
index ed35e743c9..215be9a01e 100644
--- a/website/assets/styles/bootstrap-overrides.less
+++ b/website/assets/styles/bootstrap-overrides.less
@@ -96,12 +96,27 @@ a.text-danger:hover, a.text-danger:focus {
   &.btn-primary {
     background-color: #ff5c83;
     border-color: #ff5c83;
-    &:hover {
-      background-color: darken(#ff5c83, 10%);
-      border-color: darken(#ff5c83, 10%);
+    cursor: pointer;
+    color: #FFF;
+    overflow: hidden;
+    text-decoration: none;
+    position: relative;
+    &:before {
+      background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
+      opacity: 1;
+      content: ' ';
+      position: absolute;
+      top: 0;
+      left: -5px;
+      width: 50%;
+      height: 100%;
+      transform: skew(-10deg);
+      transition: left 0.5s ease-in, opacity 0.50s ease-in, width 0.5s ease-in;
     }
-    &:focus, &.focus {
-      box-shadow: 0 0 0.25rem 0.2rem #ff5c83;
+    &:hover:before {
+      opacity: 0;
+      left: 160px;
+      width: 110%;
     }
     &.disabled, &:disabled {
       color: #fff;
@@ -121,9 +136,27 @@ a.text-danger:hover, a.text-danger:focus {
   &.btn-info {
     background-color: #6A67FE;
     border-color: #6A67FE;
-    &:hover {
-      background-color: #6A67FE;
-      border-color: #6A67FE;
+    cursor: pointer;
+    color: #FFF;
+    overflow: hidden;
+    text-decoration: none;
+    position: relative;
+    &:before {
+      background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
+      opacity: 1;
+      content: ' ';
+      position: absolute;
+      top: 0;
+      left: -5px;
+      width: 50%;
+      height: 100%;
+      transform: skew(-10deg);
+      transition: left 0.5s ease-in, opacity 0.50s ease-in, width 0.5s ease-in;
+    }
+    &:hover:before {
+      opacity: 0;
+      left: 160px;
+      width: 110%;
     }
     &:not(:disabled):not(.disabled):active {
       background-color: #6A67FE;
diff --git a/website/assets/styles/pages/compliance.less b/website/assets/styles/pages/compliance.less
index c002b3cd60..3ab2276b9f 100644
--- a/website/assets/styles/pages/compliance.less
+++ b/website/assets/styles/pages/compliance.less
@@ -72,6 +72,7 @@
       align-items: center;
       color: #FFF;
       position: relative;
+      text-decoration: none;
     }
     [purpose='cta-button']::before {
       background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
diff --git a/website/assets/styles/pages/homepage.less b/website/assets/styles/pages/homepage.less
index afe7d037c3..ba72c5ac3f 100644
--- a/website/assets/styles/pages/homepage.less
+++ b/website/assets/styles/pages/homepage.less
@@ -259,7 +259,7 @@
      [purpose='cta-button']::before {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
        opacity: 1;
-       content: ' ';
+       content: '';
        position: absolute;
        top: 0;
        left: -5px;
@@ -269,7 +269,6 @@
        transition: left 0.5s ease-in, opacity 0.50s ease-in, width 0.5s ease-in;
      }
      [purpose='cta-button']:hover:before {
-       opacity: 0;
        left: 160px;
        width: 110%;
      }
diff --git a/website/assets/styles/pages/imagine/unused-software.less b/website/assets/styles/pages/imagine/unused-software.less
index 6741df772e..0109361699 100644
--- a/website/assets/styles/pages/imagine/unused-software.less
+++ b/website/assets/styles/pages/imagine/unused-software.less
@@ -77,6 +77,7 @@
       align-items: center;
       color: #FFF;
       position: relative;
+      text-decoration: none;
     }
     [purpose='cta-button']::before {
       background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
diff --git a/website/assets/styles/pages/osquery-management.less b/website/assets/styles/pages/osquery-management.less
index 08d7ec1940..2e0fa2a1b1 100644
--- a/website/assets/styles/pages/osquery-management.less
+++ b/website/assets/styles/pages/osquery-management.less
@@ -72,6 +72,7 @@
       align-items: center;
       color: #FFF;
       position: relative;
+      text-decoration: none;
     }
     [purpose='cta-button']::before {
       background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);