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
This commit is contained in:
Eric 2023-04-20 13:30:12 -05:00 committed by GitHub
parent f361137110
commit d2124b711f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 45 additions and 10 deletions

View file

@ -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;

View file

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

View file

@ -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%;
}

View file

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

View file

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