| Current Path : /home/emeraadmin/public_html/src/scss/ |
| Current File : /home/emeraadmin/public_html/src/scss/_buttons.scss |
.btn {
padding: 6px 14px;
height: 30px;
font-size: 13px;
font-weight: 600;
@include transition(0.3s ease-in-out);
i {
margin-right: 5px;
}
}
.btn-icon {
width: 30px;
height: 30px;
padding: 0;
text-align: center;
line-height: 32px;
font-size: 14px;
display: inline-block;
@include border-radius(50%);
@include transition(all .5s ease-in-out);
i {
margin-right: 0 !important;
}
}
.social-btn {
width: 30px;
height: 30px;
padding: 0;
border-radius: 50%;
text-align: center;
line-height: 30px;
color: $white;
i {
margin: 0;
}
}
.btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger, .btn-inverse, .btn-purple, .btn-pink, .btn-twitter, .btn-facebook, .btn-linkedin, .btn-google, .btn-dribbble, .btn-instagram {
color: $white;
}
.btn {
&-theme {
background: linear-gradient(150deg, #f05138 15%, #ee3a5b 70%, #ed1375 94%);
color: #fff;
}
&default {
background-color: #dae6ec;
border-color: #dae6ec;
&:focus, &:hover, &:active, &.active {
background-color: #dae6ec;
border-color: #C2CED4;
color: $white !important;
}
}
&-primary {
background-color: $primary;
border: 1px solid $primary;
&:hover, &:focus, &.active {
background-color: darken($primary, 5%);
border: 1px solid darken($primary, 5%);
color: $white !important;
}
}
&-success {
background-color: $success;
border: 1px solid $success;
&:hover, &:focus, &.active {
background-color: darken($success, 5%);
border: 1px solid darken($success, 5%);
color: $white !important;
}
}
&-info {
background-color: $info;
border: 1px solid $info;
&:hover, &:focus, &.active {
background-color: darken($info, 5%);
border: 1px solid darken($info, 5%);
color: $white !important;
}
}
&-warning {
background-color: $warning;
border: 1px solid $warning;
&:hover, &:focus, &.active {
background-color: darken($warning, 5%);
border: 1px solid darken($warning, 5%);
color: $white !important;
}
}
&-danger {
background-color: $danger;
border: 1px solid $danger;
&:focus, &:hover, &.active {
background-color: darken($danger, 5%);
border: 1px solid darken($danger, 5%);
color: $white !important;
}
}
&-inverse {
background-color: $inverse;
border: 1px solid $inverse;
&:hover, &:focus, &.active {
background-color: darken($inverse, 5%);
border: 1px solid darken($inverse, 5%);
color: $white !important;
}
}
&-purple {
background-color: $purple;
border: 1px solid $purple;
&:hover, &:focus, &.active {
background-color: darken($purple, 5%);
border: 1px solid darken($purple, 5%);
color: $white !important;
}
}
&-pink {
background-color: $pink;
border: 1px solid $pink;
&:hover, &:focus, &.active {
background-color: darken($pink, 5%);
border: 1px solid darken($pink, 5%);
color: $white !important;
}
}
&-facebook {
background: $facebook;
}
&-twitter {
background: $twitter;
}
&-dribbble {
background: $dribbble;
}
&-linkedin {
background: $linkedin;
}
&-google {
background: $google;
}
&-instagram {
background: $instagram;
}
}
.template-demo {
.btn {
margin-right: 10px;
margin-bottom: 10px;
}
}
.btn-group {
.btn {
margin: 0;
}
}