64 lines
1.5 KiB
SCSS
64 lines
1.5 KiB
SCSS
.tao-btn-primary {
|
|
color: $tao-blue-500;
|
|
font-size: $font-size-base;
|
|
padding: 6px 19px;
|
|
border-radius: 100px !important;
|
|
background-color: transparent;
|
|
border: 1px solid $tao-blue-500;
|
|
outline: none !important;
|
|
transition: all 0.18s ease-out 0.18s;
|
|
cursor: pointer;
|
|
|
|
&.large {
|
|
font-size: $font-size-h3;
|
|
padding: 10px 32px;
|
|
}
|
|
|
|
&.hidden {
|
|
visibility: hidden;
|
|
|
|
}
|
|
|
|
&.medium {
|
|
font-size: $font-size-h4;
|
|
padding: 8px 24px;
|
|
}
|
|
|
|
&:hover
|
|
{
|
|
background: initial;
|
|
background-color: transparent;
|
|
color: $tao-blue-500;
|
|
box-shadow: inset 0 0 0 1px $tao-blue-500;
|
|
}
|
|
|
|
&:active {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.tao-btn-rainbow {
|
|
@extend .tao-btn-primary;
|
|
background: linear-gradient(135deg, $tao-blue-500 0%, $tao-turqoise-500 70%,$tao-bright-green-300 100%);
|
|
transition: all 0.18s ease;
|
|
color: white;
|
|
border: none;
|
|
text-decoration: none !important;
|
|
box-shadow: 0 4px 8px 0 rgba($tao-blue-500, 0.2), 0 8px 20px 0 rgba($tao-blue-500, 0.29);
|
|
|
|
|
|
&:active {
|
|
box-shadow: 0 4px 8px 0 rgba($tao-blue-500, 0.1), 0 4px 10px 0 rgba($tao-blue-500, 0.09);
|
|
background: linear-gradient(135deg, $tao-blue-500 0%, $tao-turqoise-500 80%,$tao-bright-green-300 100%);
|
|
color: white;
|
|
padding: 5px 18px;
|
|
}
|
|
|
|
&:hover {
|
|
background: linear-gradient(135deg, $tao-blue-500 0%, $tao-turqoise-500 80%,$tao-bright-green-300 100%);
|
|
box-shadow: 0 4px 8px 0 rgba($tao-blue-500, 0.2), 0 8px 20px 0 rgba($tao-blue-500, 0.29);
|
|
color: white;
|
|
}
|
|
}
|