// stylelint-disable selector-no-qualifying-type // // Base styles // .btn { @include fontFace($meta-light); // @include fontSize(16); // @include lineHeight(36, 16); color: #fff; display: inline-block; position: relative; // padding: 0 30px; // border-radius: 18px; text-align: center; white-space: nowrap; vertical-align: middle; user-select: none; border: $input-btn-border-width solid transparent; cursor: pointer; @include button-size($input-btn-padding-y, $input-btn-padding-x, $font-size-base, $input-btn-line-height, $btn-border-radius); @include transition($btn-transition); // Share hover and focus styles @include hover-focus { text-decoration: none; } &:focus, &.focus { outline: 0; box-shadow: $input-btn-focus-box-shadow; } // Disabled comes first so active can properly restyle &.disabled, &:disabled { opacity: .65; @include box-shadow(none); } &:not([disabled]):not(.disabled):active, &:not([disabled]):not(.disabled).active { background-image: none; @include box-shadow($input-btn-focus-box-shadow, $btn-active-box-shadow); } } // Future-proof disabling of clicks on `` elements a.btn.disabled, fieldset[disabled] a.btn { pointer-events: none; } // // Alternate buttons // @each $color, $value in $theme-colors { .btn-#{$color} { @include button-variant($value, $value); } } @each $color, $value in $theme-colors { .btn-outline-#{$color} { @if $color == "light" { @include button-outline-variant($value, $gray-900); } @else { @include button-outline-variant($value, $white); } } } // // Link buttons // // Make a button look and behave like a link .btn-link { font-weight: $font-weight-normal; color: $link-color; background-color: transparent; padding-left: 0; padding-right: 0; line-height: inherit; @include hover { // color: $link-hover-color; color: $white; // text-decoration: $link-hover-decoration; text-decoration: none; background-color: transparent; border-color: transparent; } &:focus, &.focus { border-color: transparent; box-shadow: none; } &:disabled, &.disabled { // color: $btn-link-disabled-color; } // No need for an active state here } // // Button Sizes // .btn-lg { @include button-size($input-btn-padding-y-lg, $input-btn-padding-x-lg, $font-size-lg, $input-btn-line-height-lg, $btn-border-radius-lg); } .btn-md { @include button-size($input-btn-padding-y-md, $input-btn-padding-x-md, $font-size-md, $input-btn-line-height-md, $btn-border-radius-md); } .btn-sm { @include button-size($input-btn-padding-y-sm, $input-btn-padding-x-sm, $font-size-sm, $input-btn-line-height-sm, $btn-border-radius-sm); } // // Block button // .btn-block { display: block; width: 100%; } // Vertically space out multiple block buttons .btn-block + .btn-block { margin-top: $btn-block-spacing-y; } // Specificity overrides input[type="submit"], input[type="reset"], input[type="button"] { &.btn-block { width: 100%; } } // // file buttons // .btn-pdf { &:before { @include fontFace($meta-light); @include fontSize(14); @include lineHeight(16, 14); text-transform: uppercase; content: "pdf"; color: #695fff; height: 16px; display: inline-block; padding: 0 5px; border-radius: 8px; background-color: #fadc73; margin: 0 5px 0 0; } } // // gradient borders // .btn-grabor { background: rgb(0,215,215); background: -moz-linear-gradient(-45deg, rgba(0,215,215,1) 25%, rgba(250,220,115,1) 25%, rgba(250,220,115,1) 75%, rgba(0,215,215,1) 75%); background: -webkit-linear-gradient(-45deg, rgba(0,215,215,1) 25%,rgba(250,220,115,1) 25%,rgba(250,220,115,1) 75%,rgba(0,215,215,1) 75%); background: linear-gradient(170deg, rgba(0,215,215,1) 25%,rgba(250,220,115,1) 25%,rgba(250,220,115,1) 75%,rgba(0,215,215,1) 75%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00d7d7', endColorstr='#00d7d7',GradientType=1 ); background-size:100%; background-position:93px; position: relative; border: none; display: inline-block; @include transition($transition-background); span { position: relative; padding: 0 10px; z-index: 2; } &:after { content: ""; display: block; width: calc( 100% - 8px ); height: calc( 100% - 8px ); position: absolute; left: 4px; top: 4px; background-color: $purple; border-radius: 25px; } &:hover { // background: rgb(0,215,215); // background: -moz-linear-gradient(45deg, rgba(0,215,215,1) 9%, rgba(250,220,115,1) 9%, rgba(250,220,115,1) 35%, rgba(0,215,215,1) 35%, rgba(0,215,215,1) 68%, rgba(250,220,115,1) 68%, rgba(250,220,115,1) 89%, rgba(0,215,215,1) 89%); // background: -webkit-linear-gradient(45deg, rgba(0,215,215,1) 9%,rgba(250,220,115,1) 9%,rgba(250,220,115,1) 35%,rgba(0,215,215,1) 35%,rgba(0,215,215,1) 68%,rgba(250,220,115,1) 68%,rgba(250,220,115,1) 89%,rgba(0,215,215,1) 89%); // background: linear-gradient(45deg, rgba(0,215,215,1) 9%,rgba(250,220,115,1) 9%,rgba(250,220,115,1) 35%,rgba(0,215,215,1) 35%,rgba(0,215,215,1) 68%,rgba(250,220,115,1) 68%,rgba(250,220,115,1) 89%,rgba(0,215,215,1) 89%); // filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00d7d7', endColorstr='#00d7d7',GradientType=1 ); background-position:186px; } } .bannerButton{ display: inline-block; position: relative; left: 50%; transform: translateX(-50%); z-index: 1000; height:60px; margin:0px auto; a{ width: 100%; height: 100%; margin:0; padding: 0 40px; border:0px; @include fontSize(16); @include lineHeight(60,16); font-weight: 600; color: #f2f2f2; display: block; text-align: center; border-radius: 30px; box-shadow: 0 10px 30px 0 rgba(101, 171, 227, 0.3); background-image: linear-gradient(to bottom, #3893da, #6fc6ef); @include transition($transition-base); &.iAmHover { box-shadow: 0 10px 30px 0 rgba(206, 22, 40, 0.3), inset 0 10px 30px 0 #c31829; background-image: linear-gradient(to top, #ce1628, #ce1628); } } }