button { border: 0 solid; padding: 0; line-height: 1.2; background: transparent; } #master { .wc-stripe-checkout-button, .wp-block-button__link, .widget.null-instagram-feed > p.clear a, .woocommerce-product-search button[type="submit"], .grofile-full-link, .flickr-more, #eu-cookie-law input, .wc-shortcodes-button, #infinite-handle span button, .woocommerce #respond input#submit, .woocommerce-pagination ul span, .woocommerce-pagination ul a, .comment-navigation .nav-links a, .posts-navigation .nav-links a, .button, .addresses .edit, input[type="button"], input[type="reset"], input[type="submit"] { display: inline-block; padding: 14px 24px; border: none; border-radius: $button__radius; color: #fff; background: none; background-color: #000000; @include rem('font-size',$font__main-size); /*font-size: 0.75rem;*/ font-weight: bold; line-height: 1.2; text-align: center; text-decoration: none; /* -webkit-transition: color 0.5s ease, background-color 0.5s ease; */ /* -moz-transition: color 0.5s ease, background-color 0.5s ease; */ /* -o-transition: color 0.5s ease, background-color 0.5s ease; */ /* transition: color 0.5s ease, background-color 0.5s ease; */ } // inline buttons and input fields .woocommerce .checkout_coupon .input-text, .woocommerce .coupon .input-text { @include rem('height',$button__height); } #tertiary, #secondary { .widget.null-instagram-feed > p.clear a, .woocommerce-product-search button[type="submit"], .button.alt, .button, .addresses .edit, input[type="button"], input[type="reset"], input[type="submit"] { @include rem('font-size',$font__tiny-size); text-transform: uppercase; padding: 12px 30px; } } .wc-stripe-checkout-button:active, .wc-stripe-checkout-button:focus, .wp-block-button__link:active, .wp-block-button__link:focus, .widget.null-instagram-feed > p.clear a:active, .widget.null-instagram-feed > p.clear a:focus, .woocommerce-product-search button[type="submit"]:active, .woocommerce-product-search button[type="submit"]:focus, .grofile-full-link:active, .grofile-full-link:focus, .flickr-more:active, .flickr-more:focus, #eu-cookie-law input:active, #eu-cookie-law input:focus, .wc-shortcodes-button:active, .wc-shortcodes-button:focus, #infinite-handle span button:focus, #infinite-handle span button:active, .woocommerce #respond input#submit:focus, .woocommerce #respond input#submit:active, .woocommerce-pagination ul a:focus, .comment-navigation .nav-links a:focus, .posts-navigation .nav-links a:focus, .button:focus, input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus, .woocommerce-pagination ul a:active, .comment-navigation .nav-links a:active, .posts-navigation .nav-links a:active, .button:active, input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active { color: #fff; background: #252323; } .wc-stripe-checkout-button:hover, .wp-block-button__link:hover, .widget.null-instagram-feed > p.clear a:hover, .woocommerce-product-search button[type="submit"]:hover, .grofile-full-link:hover, .flickr-more:hover, #eu-cookie-law input:hover, .wc-shortcodes-button:hover, #infinite-handle span button:hover, .woocommerce #respond input#submit:active, .woocommerce-pagination ul a:hover, .comment-navigation .nav-links a:hover, .posts-navigation .nav-links a:hover, .button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover { color: #fff; background: #1c2220; } .button.alt { padding: 17px 59px; } .widget_shopping_cart .button, .addresses .edit, .woocommerce-MyAccount-downloads-file.button, .woocommerce-MyAccount-orders .woocommerce-button, .grofile-full-link, .flickr-more, #eu-cookie-law input, .button.button-small { padding: 7px 14px; @include rem('font-size',$font__tiny-size); text-transform: uppercase; } .button.alt:hover { color: #fff; background: #1c2220; } .button.alt:focus, .button.alt:active { color: #fff; background: #252323; } } #master body { .fancy-button:focus, .fancy-button:visited, .fancy-button:active, .fancy-button:hover, .fancy-button { // background-color: transparent; border-width: 0; color: $color__white; text-transform: uppercase; font-weight: bold; // background-size: 100% 100%; // background-repeat: no-repeat; cursor: pointer; border-radius: 0; @media (min-width: 601px) { @include rem('font-size',$font__large-size); padding: 22px 30px; } } .fancy-button { &, &:focus, &:visited, &:active { // background-image: url("img/button-bg.png"); } &:before { // content: " "; // position: absolute; // clip: rect(1px, 1px, 1px, 1px); // background-repeat: no-repeat; // background-position: -9999px -9999px; } &:after { @media (min-width: 601px) { content: ">>"; margin-left: 10px; } } } .fancy-button:before, .fancy-button:hover { // background-image: url("img/button-bg-dark.png"); } .fancy2-button:focus, .fancy2-button:visited, .fancy2-button:active, .fancy2-button:hover, .fancy2-button { // background-color: transparent; border-width: 0; text-transform: uppercase; // background-size: 100% 100%; // background-repeat: no-repeat; cursor: pointer; border-radius: 0; color: $color__white; font-weight: bold; position: relative; @media (min-width: 601px) { @include rem('font-size',$font__large-size); padding: 22px 30px; padding-right: 71px; } } .fancy2-button { &, &:focus, &:visited, &:active { // background-image: url("img/button2-bg.jpg"); } &:before { // content: " "; // position: absolute; // clip: rect(1px, 1px, 1px, 1px); // background-repeat: no-repeat; // background-position: -9999px -9999px; } &:after { @media (min-width: 601px) { font-family:"Genericons-Neue"; display:inline-block; vertical-align:top; line-height:1; font-weight:normal; font-style:normal; speak:none; text-decoration:inherit; text-transform:none; text-rendering:auto; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -ms-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); content: "\f431"; font-weight: normal; color: $color__text; background-color: $color__white; border-radius: 100%; @include rem('font-size',$font__small-size); vertical-align: middle; width: 26px; height: 26px; line-height: 26px; display: inline-block; position: absolute; right: 30px; top: 50%; margin-top: -13px; } } } .fancy2-button:before, .fancy2-button:hover { // background-image: url("img/button2-bg-dark.jpg"); } #page #content .option-white-text input[type="button"], #page #content .option-white-text input[type="reset"], #page #content .option-white-text input[type="submit"], #page #content .option-white-text .button, .white-border-button { &, &:active, &:visited, &:focus, &:hover { background-color: transparent; border: 2px solid $color__white; padding: 14px 24px; border-radius: $button__radius; text-transform: none; @include rem('font-size',$font__main-size); font-weight: bold; line-height: 1.2; } &:after { display: none; content: ""; } &:hover { text-decoration: underline; &:after { text-decoration: none; } } } }