/****************************************************** CUSTOM BTN VALUES ******************************************************/ .btn { padding: 14px 24px; border: 0 none; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; } .btn:focus, .btn:active:focus, .btn.active:focus { outline: 0 none; } /****************************************************** STANDARD BUTTONS ******************************************************/ .btn-default { border: 2px solid #C4C4C4; color: #737373; padding: 12px 22px; } /*noinspection SpellCheckingInspection*/ .btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default { background: #FFFFFF; border-color: #949494; color: #737373; } .btn-default:active, .btn-default.active { border-color: #737373; box-shadow: none; } .btn-primary { background: #2272FF; color: #ffffff; } /*noinspection SpellCheckingInspection*/ .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary { background: #418eff; } .btn-primary:active, .btn-primary.active { background: #3b7ae3; box-shadow: none; } .btn-green { background: #08DD73; color: #ffffff; } /*noinspection SpellCheckingInspection*/ .btn-green:hover, .btn-green:focus, .btn-green:active, .btn-green.active, .open > .dropdown-toggle.btn-green { background: #08eb7f; } .btn-green:active, .btn-green.active { background: #008c52; box-shadow: none; } .btn-orange { background: #FF9226; color: #ffffff; } /*noinspection SpellCheckingInspection*/ .btn-orange:hover, .btn-orange:focus, .btn-orange:active, .btn-orange.active, .open > .dropdown-toggle.btn-orange { background: #ff9f40; } .btn-orange:active, .btn-orange.active { background: #d77e1f; box-shadow: none; } .btn-red { background: #F72754; color: #ffffff; } /*noinspection SpellCheckingInspection*/ .btn-red:hover, .btn-red:focus, .btn-red:active, .btn-red.active, .open > .dropdown-toggle.btn-red { background: #ff4668; } .btn-red:active, .btn-red.active { background: #d61a46; box-shadow: none; } /****************************************************** OUTLINE BUTTONS ******************************************************/ .btn.outline { background: none; padding: 12px 22px; } .btn-primary.outline { border: 2px solid #2272FF; color: #2272FF; } /*noinspection SpellCheckingInspection*/ .btn-primary.outline:hover, .btn-primary.outline:focus, .btn-primary.outline:active, .btn-primary.outline.active, .open > .dropdown-toggle.btn-primary { color: #fff; background-color: #2272FF; border-color: #2272FF; } .btn-primary.outline:active, .btn-primary.outline.active { border-color: #3b7ae3; color: #3b7ae3; box-shadow: none; } .btn-green.outline { border: 2px solid #08DD73; color: #08DD73; } /*noinspection SpellCheckingInspection*/ .btn-green.outline:hover, .btn-green.outline:focus, .btn-green.outline:active, .btn-green.outline.active, .open > .dropdown-toggle.btn-green { border-color: #39bf87; background-color: #39bf87; color: #fff } .btn-green.outline:active, .btn-green.outline.active { border-color: #008c52; color: #008c52; box-shadow: none; } .btn-orange.outline { border: 2px solid #FF9226; color: #FF9226; } /*noinspection SpellCheckingInspection*/ .btn-orange.outline:hover, .btn-orange.outline:focus, .btn-orange.outline:active, .btn-orange.outline.active, .open > .dropdown-toggle.btn-orange { border-color: #ff9f40; background-color: #ff9f40; color: #fff; } .btn-orange.outline:active, .btn-orange.outline.active { border-color: #d77e1f; color: #d77e1f; box-shadow: none; } .btn-red.outline { border: 2px solid #F72754; color: #F72754; } /*noinspection SpellCheckingInspection*/ .btn-red.outline:hover, .btn-red.outline:focus, .btn-red.outline:active, .btn-red.outline.active, .open > .dropdown-toggle.btn-red { color: #fff; border-color: #ff4668; background-color: #ff4668; } .btn-red.outline:active, .btn-red.outline.active { border-color: #d61a46; color: #d61a46; box-shadow: none; } /****************************************************** GRADIENT BUTTONS ******************************************************/ .btn-primary.gradient { background: -moz-linear-gradient(top, #418eff 50%, #2272FF 50%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #418eff), color-stop(50%, #2272FF)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #418eff 50%, #2272FF 50%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #418eff 50%, #2272FF 50%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #418eff 50%, #2272FF 50%); /* IE10+ */ background: linear-gradient(to bottom, #418eff 50%, #2272FF 50%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#418eff', endColorstr='#2272FF', GradientType=0); /* IE6-9 */ } /*noinspection SpellCheckingInspection*/ .btn-primary.gradient:hover, .btn-primary.gradient:focus, .btn-primary.gradient:active, .btn-primary.gradient.active, .open > .dropdown-toggle.btn-primary { background: -moz-linear-gradient(top, #5ea8ff 50%, #418eff 50%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #5ea8ff), color-stop(50%, #418eff)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #5ea8ff 50%, #418eff 50%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #5ea8ff 50%, #418eff 50%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #5ea8ff 50%, #418eff 50%); /* IE10+ */ background: linear-gradient(to bottom, #5ea8ff 50%, #418eff 50%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5ea8ff', endColorstr='#418eff', GradientType=0); /* IE6-9 */ } .btn-primary.gradient:active, .btn-primary.gradient.active { background: -moz-linear-gradient(top, #3562c1 50%, #3b7ae3 50%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #3562c1), color-stop(50%, #3b7ae3)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #3562c1 50%, #3b7ae3 50%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #3562c1 50%, #3b7ae3 50%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #3562c1 50%, #3b7ae3 50%); /* IE10+ */ background: linear-gradient(to bottom, #3562c1 50%, #3b7ae3 50%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3562c1', endColorstr='#3b7ae3', GradientType=0); /* IE6-9 */ } .btn-green.gradient { background: -moz-linear-gradient(top, #39bf87 50%, #08DD73 50%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #39bf87), color-stop(50%, #08DD73)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #39bf87 50%, #08DD73 50%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #39bf87 50%, #08DD73 50%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #39bf87 50%, #08DD73 50%); /* IE10+ */ background: linear-gradient(to bottom, #39bf87 50%, #08DD73 50%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#39bf87', endColorstr='#08DD73', GradientType=0); /* IE6-9 */ } /*noinspection SpellCheckingInspection*/ .btn-green.gradient:hover, .btn-green.gradient:focus, .btn-green.gradient:active, .btn-green.gradient.active, .open > .dropdown-toggle.btn-green { background: -moz-linear-gradient(top, #73bf9f 50%, #39bf87 50%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #73bf9f), color-stop(50%, #39bf87)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #73bf9f 50%, #39bf87 50%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #73bf9f 50%, #39bf87 50%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #73bf9f 50%, #39bf87 50%); /* IE10+ */ background: linear-gradient(to bottom, #73bf9f 50%, #39bf87 50%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#73bf9f', endColorstr='#39bf87', GradientType=0); /* IE6-9 */ } .btn-green.gradient:active, .btn-green.gradient.active { background: -moz-linear-gradient(top, #2a8c63 50%, #008c52 50%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #2a8c63), color-stop(50%, #008c52)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #2a8c63 50%, #008c52 50%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #2a8c63 50%, #008c52 50%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #2a8c63 50%, #008c52 50%); /* IE10+ */ background: linear-gradient(to bottom, #2a8c63 50%, #008c52 50%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2a8c63', endColorstr='#008c52', GradientType=0); /* IE6-9 */ } .btn-orange.gradient { background: -moz-linear-gradient(top, #ff9f40 50%, #FF9226 50%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #ff9f40), color-stop(50%, #FF9226)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ff9f40 50%, #FF9226 50%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ff9f40 50%, #FF9226 50%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ff9f40 50%, #FF9226 50%); /* IE10+ */ background: linear-gradient(to bottom, #ff9f40 50%, #FF9226 50%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff9f40', endColorstr='#FF9226', GradientType=0); /* IE6-9 */ } /*noinspection SpellCheckingInspection*/ .btn-orange.gradient:hover, .btn-orange.gradient:focus, .btn-orange.gradient:active, .btn-orange.gradient.active, .open > .dropdown-toggle.btn-orange { background: -moz-linear-gradient(top, #ffbe77 50%, #ff9f40 50%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #ffbe77), color-stop(50%, #ff9f40)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ffbe77 50%, #ff9f40 50%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ffbe77 50%, #ff9f40 50%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ffbe77 50%, #ff9f40 50%); /* IE10+ */ background: linear-gradient(to bottom, #ffbe77 50%, #ff9f40 50%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffbe77', endColorstr='#ff9f40', GradientType=0); /* IE6-9 */ } .btn-orange.gradient:active, .btn-orange.gradient.active { background: -moz-linear-gradient(top, #ba671d 50%, #d77e1f 50%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #ba671d), color-stop(50%, #d77e1f)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ba671d 50%, #d77e1f 50%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ba671d 50%, #d77e1f 50%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ba671d 50%, #d77e1f 50%); /* IE10+ */ background: linear-gradient(to bottom, #ba671d 50%, #d77e1f 50%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ba671d', endColorstr='#d77e1f', GradientType=0); /* IE6-9 */ } .btn-red.gradient { background: -moz-linear-gradient(top, #ff4668 50%, #F72754 50%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #ff4668), color-stop(50%, #F72754)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ff4668 50%, #F72754 50%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ff4668 50%, #F72754 50%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ff4668 50%, #F72754 50%); /* IE10+ */ background: linear-gradient(to bottom, #ff4668 50%, #F72754 50%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff4668', endColorstr='#F72754', GradientType=0); /* IE6-9 */ } /*noinspection SpellCheckingInspection*/ .btn-red.gradient:hover, .btn-red.gradient:focus, .btn-red.gradient:active, .btn-red.gradient.active, .open > .dropdown-toggle.btn-red { background: -moz-linear-gradient(top, #ff8096 50%, #ff4668 50%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #ff8096), color-stop(50%, #ff4668)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ff8096 50%, #ff4668 50%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ff8096 50%, #ff4668 50%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ff8096 50%, #ff4668 50%); /* IE10+ */ background: linear-gradient(to bottom, #ff8096 50%, #ff4668 50%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff8096', endColorstr='#ff4668', GradientType=0); /* IE6-9 */ } .btn-red.gradient:active, .btn-red.gradient.active { background: -moz-linear-gradient(top, #af1841 50%, #d61a46 50%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #af1841), color-stop(50%, #d61a46)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #af1841 50%, #d61a46 50%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #af1841 50%, #d61a46 50%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #af1841 50%, #d61a46 50%); /* IE10+ */ background: linear-gradient(to bottom, #af1841 50%, #d61a46 50%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#af1841', endColorstr='#d61a46', GradientType=0); /* IE6-9 */ } /****************************************************** ROUNDED BUTTONS ******************************************************/ .btn.round { border-radius: 24px; } .btn-lg.round { border-radius: 32px; } .btn-sm.round { border-radius: 14px; } .btn-xs.round { border-radius: 10px; } /****************************************************** RAISED BUTTONS ******************************************************/ .btn-primary.raised { box-shadow: 0 3px 0 0 #3b7ae3; } .btn-primary.raised:active, .btn-primary.raised.active { background: #418eff; box-shadow: none; margin-bottom: -3px; margin-top: 3px; } .btn-green.raised { box-shadow: 0 3px 0 0 #008c52; } .btn-green.raised:active, .btn-green.raised.active { background: #39bf87; box-shadow: none; margin-bottom: -3px; margin-top: 3px; } .btn-orange.raised { box-shadow: 0 3px 0 0 #d77e1f; } .btn-orange.raised:active, .btn-orange.raised.active { background: #ff9f40; box-shadow: none; margin-bottom: -3px; margin-top: 3px; } .btn-red.raised { box-shadow: 0 3px 0 0 #d61a46; } .btn-red.raised:active, .btn-red.raised.active { background: #ff4668; box-shadow: none; margin-bottom: -3px; margin-top: 3px; } /****************************************************** BUTTON SIZING ******************************************************/ .btn-xs, .btn-group-xs > .btn { padding: 2px 6px; } .btn-sm, .btn-group-sm > .btn { padding: 8px 12px; } .btn-lg { padding: 20px 40px; border-radius: 4px; } .btn-xs.btn-default, .btn-xs.outline { padding: 0 4px; } .btn-sm.btn-default, .btn-sm.outline { padding: 6px 10px; } .btn-lg.btn-default, .btn-lg.outline { padding: 18px 38px; } .btn-transparent { border: 3px solid #fff; padding: 11px 21px; background: transparent; color: #fff; } .btn-transparent:hover { border-color: rgba(255, 255, 255, 0.5); }