102 lines
1.9 KiB
SCSS
102 lines
1.9 KiB
SCSS
.rounded-button {
|
|
padding: 7px 35px;
|
|
background-color: $primary;
|
|
font-family: Montserrat, sans-serif;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 30px;
|
|
transition: $hover-duration;
|
|
|
|
&:hover {
|
|
background-color: darken($primary, $hover-threshold);
|
|
transition: $hover-duration;
|
|
text-decoration: none;
|
|
color: white;
|
|
cursor: pointer;
|
|
}
|
|
|
|
&--strong {
|
|
font-weight: bold;
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
&--very-strong {
|
|
@extend .rounded-button--strong;
|
|
font-size: 21px;
|
|
padding: 15px 60px;
|
|
}
|
|
|
|
&--uppercase {
|
|
text-transform: uppercase;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
.rect-button {
|
|
padding: 10px 25px;
|
|
font-family: Montserrat, sans-serif;
|
|
font-size: 21px;
|
|
font-weight: 500;
|
|
border: none;
|
|
border-radius: 3px;
|
|
background-color: $primary;
|
|
color: white;
|
|
transition: $hover-duration;
|
|
text-align: left;
|
|
line-height: 30px;
|
|
|
|
&:hover {
|
|
background-color: lighten($primary, $hover-threshold);
|
|
cursor: pointer;
|
|
transition: $hover-duration;
|
|
}
|
|
|
|
&--github {
|
|
background-color: $github-color;
|
|
color: black;
|
|
|
|
&:hover {
|
|
background-color: darken($github-color, $hover-threshold);
|
|
}
|
|
}
|
|
|
|
&--twitter {
|
|
background-color: $twitter-color;
|
|
color: white;
|
|
|
|
&:hover {
|
|
background-color: lighten($twitter-color, $hover-threshold);
|
|
}
|
|
}
|
|
|
|
&--facebook {
|
|
background-color: $facebook-color;
|
|
color: white;
|
|
|
|
&:hover {
|
|
background-color: lighten($facebook-color, $hover-threshold);
|
|
}
|
|
}
|
|
|
|
&--fixed-width {
|
|
width: 240px;
|
|
}
|
|
|
|
&--small {
|
|
background-color: $background-light;
|
|
font-family: Montserrat, sans-serif;
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
color: $primary;
|
|
transition: $hover-duration;
|
|
|
|
&:hover {
|
|
background-color: darken($background-light, $hover-threshold);
|
|
transition: $hover-duration;
|
|
}
|
|
}
|
|
}
|
|
|
|
.rect-button__icon {
|
|
margin-right: 35px;
|
|
} |