/** * @file * Styles for Magazine+'s buttons. */ a.button, .button > a, input[type="submit"], input[type="reset"], input[type="button"] { font-size: 14px; font-weight: 400; padding: 15px 30px; color: #ffffff; display: inline-block; line-height: 1; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; margin: 10px 0; text-align: center; border-width: 1px; border-style: solid; border-color: transparent; text-decoration: none; } .headings-wide-spacing-enabled a.button, .headings-wide-spacing-enabled .button > a, .headings-wide-spacing-enabled input[type="submit"], .headings-wide-spacing-enabled input[type="reset"], .headings-wide-spacing-enabled input[type="button"] { letter-spacing: 0.25em; text-transform: uppercase; } input[type="submit"] + input[type="submit"], .button + .button { margin-left: 20px; } @media (max-width: 767px) { .text-center .button + .button { margin-right: 5px; } .text-center .button { margin-right: 5px; margin-left: 5px; } } a.button:hover, a.button:focus, .button > a:hover, .button > a:focus, input[type="submit"]:hover, input[type="submit"]:focus, input[type="reset"]:hover, input[type="reset"]:focus, input[type="button"]:hover, input[type="button"]:focus { color: #ffffff; text-decoration: none; } span.button-operator { margin: 0 10px 0 5px; } a.button i { padding-right: 10px; } a.button--no-margins { margin: 0; } /*Buttons hover style 2*/ a.button.button--hover-style-2, .button.button--hover-style-2 > a { position: relative; z-index: 1; } a.button.button--hover-style-2:before, .button.button--hover-style-2 > a:before { content:""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; transform: scaleX(0); border-radius: 0px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } a.button.button--hover-style-2:hover:before, a.button.button--hover-style-2:focus:before, .button.button--hover-style-2 > a:hover:before, .button.button--hover-style-2 > a:focus:before { transform: scaleX(1); } /*Colored Regions*/ .region--light-typography a.button, .region--light-typography .button > a, .region--light-typography input[type="submit"], .region--light-typography input[type="reset"], .region--light-typography input[type="button"] { color: #ffffff; text-decoration: none; background-color: transparent; border-style: solid; border-width: 1px; border-color: #ffffff; } /*Colored Regions style 2*/ .region--colored-background a.button.button--hover-style-2:hover, .region--dark-background a.button.button--hover-style-2:hover, .region--black-background a.button.button--hover-style-2:hover, .region--colored-background .button.button--hover-style-2 > a:hover, .region--dark-background .button.button--hover-style-2 > a:hover, .region--black-background .button.button--hover-style-2 > a:hover { background-color: transparent; }