/*----------------------------------------------------------------------------------- Shortcodes: buttons.scss -----------------------------------------------------------------------------------*/ /* ---------------------------------------------------------------- Buttons -----------------------------------------------------------------*/ .button { display: inline-block; position: relative; cursor: pointer; outline: none; white-space: nowrap; margin: 5px; padding: 8px 22px; font-size: 0.875rem; line-height: 24px; background-color: #1ABC9C; color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; border: none; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); /* Buttons - Border -----------------------------------------------------------------*/ /* Buttons - 3D -----------------------------------------------------------------*/ /* Buttons - Icon Reveal -----------------------------------------------------------------*/ } .button i { position: relative; margin-right: 5px; width: 16px; text-align: center; } .button.text-end i { margin: 0 0 0 5px; } body:not(.device-touch) .button { -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .button.button-dark { background-color: #333333; } .button.button-dark:hover { background-color: #1ABC9C; } .button.button-light { background-color: #eeeeee; color: #333333; text-shadow: none !important; } .button:hover { background-color: #444; color: #FFF; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); } .button-mini { padding: 4px 14px; font-size: 11px; line-height: 20px; } .button-mini i { margin-right: 3px; } .button-mini.text-end i { margin: 0 0 0 3px; } .button-small { padding: 7px 17px; font-size: 12px; line-height: 20px; } .button-small i { margin-right: 4px; } .button-small.text-end i { margin: 0 0 0 4px; } .button-large { padding: 8px 26px; font-size: 16px; line-height: 30px; } .button-xlarge { padding: 9px 32px; font-size: 18px; letter-spacing: 2px; line-height: 34px; } .button-xlarge i { margin-right: 8px; } .button-xlarge.text-end i { margin: 0 0 0 8px; } .button-desc { text-align: left; padding: 24px 34px; font-size: 1.25rem; height: auto; line-height: 1; font-family: "Poppins", sans-serif; } .button-desc span { display: block; margin-top: 10px; font-size: 0.875rem; font-weight: 400; letter-spacing: 1px; font-family: "PT Serif", serif; font-style: italic; text-transform: none; } .button-desc i { font-size: 3rem; width: 3rem; text-align: center; margin-right: 12px; } .button-desc.text-end i { margin: 0 0 0 12px; } .button-desc div { display: inline-block; } .button-rounded { border-radius: 3px; } .button.button-border { border: 2px solid #333333; background: transparent; color: #222222; font-weight: 700; text-shadow: none; } .button.button-border-thin { border-width: 1px; } .button.button-border.button-desc { line-height: 1; } .button.button-border:not(.button-fill):hover { background-color: #333333; color: #FFF; border-color: transparent !important; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); } .button.button-border.button-light { border-color: #FFF; color: #FFF; } .button.button-border.button-light:hover { background-color: #FFF; color: #222222; text-shadow: none; } .button.button-3d { border-radius: 3px; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15); -webkit-transition: none; -o-transition: none; transition: none; } .button.button-3d:hover { background-color: #1ABC9C; opacity: 0.9; } .button.button-3d.button-light:hover, .button.button-reveal.button-light:hover { text-shadow: none; color: #222222; } .button.button-reveal { padding-left: 28px; padding-right: 28px; overflow: hidden; } .button.button-reveal i { display: block; position: absolute; top: 0; left: -32px; width: 32px; height: 100%; display: -ms-flexbox; display: flex; align-items: center; justify-content: center; margin: 0; background-color: rgba(0, 0, 0, 0.1); } .button.button-reveal.button-border i { top: -2px; } .button.button-reveal.text-end i { left: auto; right: -32px; } .button.button-reveal.button-3d i, .button.button-reveal.button-rounded i { border-radius: 3px 0 0 3px; } .button.button-reveal.button-3d i.text-end i, .button.button-reveal.button-rounded i.text-end i { border-radius: 0 3px 3px 0; } .button.button-reveal span { display: inline-block; position: relative; left: 0; } .button.button-reveal.button-mini { padding-left: 17px; padding-right: 17px; } .button.button-reveal.button-mini i { left: -22px; width: 22px; } .button.button-reveal.button-mini.text-end i { left: auto; right: -22px; } .button.button-reveal.button-mini:hover span { left: 11px; } .button.button-reveal.button-mini.text-end:hover span { left: -11px; } .button.button-reveal.button-small { padding-left: 22px; padding-right: 22px; } .button.button-reveal.button-small i { left: -26px; width: 26px; } .button.button-reveal.button-small.text-end i { left: auto; right: -26px; } .button.button-reveal.button-small:hover span { left: 13px; } .button.button-reveal.button-small.text-end:hover span { left: -13px; } .button.button-reveal.button-large { padding-left: 32px; padding-right: 32px; } .button.button-reveal.button-large i { left: -38px; width: 38px; } .button.button-reveal.button-large.text-end i { left: auto; right: -38px; } .button.button-reveal.button-large:hover span { left: 19px; } .button.button-reveal.button-large.text-end:hover span { left: -19px; } .button.button-reveal.button-xlarge { padding-right: 40px; padding-left: 40px; } .button.button-reveal.button-xlarge i { left: -44px; width: 44px; } .button.button-reveal.button-xlarge.text-end i { left: auto; right: -44px; } .button.button-reveal.button-xlarge:hover span { left: 22px; } .button.button-reveal.button-xlarge.text-end:hover span { left: -22px; } .button.button-reveal:hover i { left: 0; } .button.button-reveal.text-end:hover i { left: auto; right: 0; } .button.button-reveal:hover span { left: 16px; } .button.button-reveal.text-end:hover span { left: -16px; } body:not(.device-touch) .button-reveal i, body:not(.device-touch) .button-reveal span { -webkit-transition: left 0.3s ease, right 0.3s ease; -o-transition: left 0.3s ease, right 0.3s ease; transition: left 0.3s ease, right 0.3s ease; } /* Buttons - Promo 100% Width -----------------------------------------------------------------*/ .button.button-full { display: block; width: 100%; white-space: normal; margin: 0; height: auto; line-height: 1.6; padding: 30px 0; font-size: 1.8725rem; font-weight: 300; text-transform: none; border-radius: 0; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); } .button.button-full.button-light { border-bottom: 1px solid rgba(0, 0, 0, 0.15); } .button.button-full.button-light strong { border-bottom-color: #333333; } .button.button-full.button-light:hover strong { border-bottom-color: #eeeeee; } .button.button-full strong { font-weight: 700; border-bottom: 2px solid #eeeeee; } body:not(.device-touch) .button.button-full strong { -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } /* Buttons - Circle -----------------------------------------------------------------*/ .button.button-circle { border-radius: 20px; } .button.button-circle.button-mini { border-radius: 14px; } .button.button-circle.button-small { border-radius: 17px; } .button.button-circle.button-large { border-radius: 23px; } .button.button-circle.button-xlarge { border-radius: 26px; } /* Buttons - Fill Effect -----------------------------------------------------------------*/ .button.button-border.button-fill { overflow: hidden; transform-style: preserve-3d; -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); -webkit-backface-visibility: hidden; } .button.button-border.button-fill span { position: relative; } .button.button-border.button-fill:hover { background: transparent !important; color: #FFF; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); } .button.button-border.button-fill.button-light:hover { border-color: #eeeeee !important; color: #333333 !important; text-shadow: none; } .button.button-border.button-fill.button-light ::before { background-color: #eeeeee; } .button.button-border.button-fill::before { content: ''; position: absolute; background-color: #333333; top: 0; left: 0; width: 0; height: 100%; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; -webkit-backface-visibility: hidden; } .button.button-border.button-fill::before ::before { width: 100%; } .button.button-border.button-fill.fill-from-right::before { left: auto; right: 0; } .button.button-border.button-fill:hover::before { width: 100%; } .button.button-border.button-fill.fill-from-top::before, .button.button-border.button-fill.fill-from-bottom::before { -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .button.button-border.button-fill.fill-from-top::before { width: 100%; height: 0; } .button.button-border.button-fill.fill-from-top:hover::before { height: 100%; } .button.button-border.button-fill.fill-from-bottom::before { width: 100%; height: 0; top: auto; bottom: 0; } .button.button-border.button-fill.fill-from-bottom:hover::before { height: 100%; } /* Buttons - Colors -----------------------------------------------------------------*/ .button-red:not(.button-border) { background-color: #C02942; } .button-red.button-3d:hover, .button-red.button-reveal:hover, .button-red.button-border:hover, .button-red.button-border.button-fill::before { background-color: #C02942 !important; } .button-border.button-red, .button-border.button-light.button-red { color: #C02942; border-color: #C02942; } .button-teal:not(.button-border) { background-color: #53777A; } .button-teal.button-3d:hover, .button-teal.button-reveal:hover, .button-teal.button-border:hover, .button-teal.button-border.button-fill::before { background-color: #53777A !important; } .button-border.button-teal, .button-border.button-light.button-teal { color: #53777A; border-color: #53777A; } .button-yellow:not(.button-border) { background-color: #ECD078; } .button-yellow.button-3d:hover, .button-yellow.button-reveal:hover, .button-yellow.button-border:hover, .button-yellow.button-border.button-fill::before { background-color: #ECD078 !important; } .button-border.button-yellow, .button-border.button-light.button-yellow { color: #ECD078; border-color: #ECD078; } .button-green:not(.button-border) { background-color: #59BA41; } .button-green.button-3d:hover, .button-green.button-reveal:hover, .button-green.button-border:hover, .button-green.button-border.button-fill::before { background-color: #59BA41 !important; } .button-border.button-green, .button-border.button-light.button-green { color: #59BA41; border-color: #59BA41; } .button-brown:not(.button-border) { background-color: #774F38; } .button-brown.button-3d:hover, .button-brown.button-reveal:hover, .button-brown.button-border:hover, .button-brown.button-border.button-fill::before { background-color: #774F38 !important; } .button-border.button-brown, .button-border.button-light.button-brown { color: #774F38; border-color: #774F38; } .button-aqua:not(.button-border) { background-color: #40C0CB; } .button-aqua.button-3d:hover, .button-aqua.button-reveal:hover, .button-aqua.button-border:hover, .button-aqua.button-border.button-fill::before { background-color: #40C0CB !important; } .button-border.button-aqua, .button-border.button-light.button-aqua { color: #40C0CB; border-color: #40C0CB; } .button-lime:not(.button-border) { background-color: #AEE239; } .button-lime.button-3d:hover, .button-lime.button-reveal:hover, .button-lime.button-border:hover, .button-lime.button-border.button-fill::before { background-color: #AEE239 !important; } .button-border.button-lime, .button-border.button-light.button-lime { color: #AEE239; border-color: #AEE239; } .button-purple:not(.button-border) { background-color: #5D4157; } .button-purple.button-3d:hover, .button-purple.button-reveal:hover, .button-purple.button-border:hover, .button-purple.button-border.button-fill::before { background-color: #5D4157 !important; } .button-border.button-purple, .button-border.button-light.button-purple { color: #5D4157; border-color: #5D4157; } .button-leaf:not(.button-border) { background-color: #A8CABA; } .button-leaf.button-3d:hover, .button-leaf.button-reveal:hover, .button-leaf.button-border:hover, .button-leaf.button-border.button-fill::before { background-color: #A8CABA !important; } .button-border.button-leaf, .button-border.button-light.button-leaf { color: #A8CABA; border-color: #A8CABA; } .button-pink:not(.button-border) { background-color: #F89FA1; } .button-pink.button-3d:hover, .button-pink.button-reveal:hover, .button-pink.button-border:hover, .button-pink.button-border.button-fill::before { background-color: #F89FA1 !important; } .button-border.button-pink, .button-border.button-light.button-pink { color: #F89FA1; border-color: #F89FA1; } .button-dirtygreen:not(.button-border) { background-color: #1693A5; } .button-dirtygreen.button-3d:hover, .button-dirtygreen.button-reveal:hover, .button-dirtygreen.button-border:hover, .button-dirtygreen.button-border.button-fill::before { background-color: #1693A5 !important; } .button-border.button-dirtygreen, .button-border.button-light.button-dirtygreen { color: #1693A5; border-color: #1693A5; } .button-blue:not(.button-border) { background-color: #1265A8; } .button-blue.button-3d:hover, .button-blue.button-reveal:hover, .button-blue.button-border:hover, .button-blue.button-border.button-fill::before { background-color: #1265A8 !important; } .button-border.button-blue, .button-border.button-light.button-blue { color: #1265A8; border-color: #1265A8; } .button-amber:not(.button-border) { background-color: #EB9C4D; } .button-amber.button-3d:hover, .button-amber.button-reveal:hover, .button-amber.button-border:hover, .button-amber.button-border.button-fill::before { background-color: #EB9C4D !important; } .button-border.button-amber, .button-border.button-light.button-amber { color: #EB9C4D; border-color: #EB9C4D; } .button-black:not(.button-border) { background-color: #111111; } .button-black.button-3d:hover, .button-black.button-reveal:hover, .button-black.button-border:hover, .button-black.button-border.button-fill::before { background-color: #111111 !important; } .button-border.button-black, .button-border.button-light.button-black { color: #111111; border-color: #111111; } .button-white:not(.button-border) { background-color: #f9f9f9; } .button-white.button-3d:hover, .button-white.button-reveal:hover, .button-white.button-border:hover, .button-white.button-border.button-fill::before { background-color: #f9f9f9 !important; } .button-border.button-white, .button-border.button-light.button-white { color: #f9f9f9; border-color: #f9f9f9; } /* Buttons - No Hover -----------------------------------------------------------------*/ .button.button-nohover:hover { opacity: inherit !important; background-color: inherit !important; color: inherit !important; border-color: inherit !important; }