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%);