.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; } .btn-default { border: 2px solid #C4C4C4; color: #737373; padding: 12px 22px; } .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: #0099cc; color: #ffffff; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary { background: #33a6cc; } .btn-primary:active, .btn-primary.active { background: #007299; box-shadow: none; } .btn-success { background: #00bf6f; color: #ffffff; } .btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .open > .dropdown-toggle.btn-success { background: #39bf87; } .btn-success:active, .btn-success.active { background: #008c52; box-shadow: none; } .btn-info { background: #31cde8; color: #ffffff; } .btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .open > .dropdown-toggle.btn-info { background: #5fd4e8; } .btn-info:active, .btn-info.active { background: #35a2b5; box-shadow: none; } .btn-warning { background: #eb8f34; color: #ffffff; } .btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active, .open > .dropdown-toggle.btn-warning { background: #eba259; } .btn-warning:active, .btn-warning.active { background: #b87430; box-shadow: none; } .btn-danger { background: #f25454; color: #ffffff; } .btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .open > .dropdown-toggle.btn-danger { background: #f26d6d; } .btn-danger:active, .btn-danger.active { background: #bf4343; box-shadow: none; } .btn.sharp { border-radius: 0; } .btn.outline { background: none; padding: 12px 22px; } .btn-primary.outline { border: 2px solid #0099cc; color: #0099cc; } .btn-primary.outline:hover, .btn-primary.outline:focus, .btn-primary.outline:active, .btn-primary.outline.active, .open > .dropdown-toggle.btn-primary { color: #33a6cc; border-color: #33a6cc; } .btn-primary.outline:active, .btn-primary.outline.active { border-color: #007299; color: #007299; box-shadow: none; } .btn-success.outline { border: 2px solid #00bf6f; color: #00bf6f; } .btn-success.outline:hover, .btn-success.outline:focus, .btn-success.outline:active, .btn-success.outline.active, .open > .dropdown-toggle.btn-success { border-color: #39bf87; color: #39bf87; } .btn-success.outline:active, .btn-success.outline.active { border-color: #008c52; color: #008c52; box-shadow: none; } .btn-info.outline { border: 2px solid #31cde8; color: #31cde8; } .btn-info.outline:hover, .btn-info.outline:focus, .btn-info.outline:active, .btn-info.outline.active, .open > .dropdown-toggle.btn-info { border-color: #5fd4e8; color: #5fd4e8; } .btn-info.outline:active, .btn-info.outline.active { border-color: #35a2b5; color: #35a2b5; box-shadow: none; } .btn-warning.outline { border: 2px solid #eb8f34; color: #eb8f34; } .btn-warning.outline:hover, .btn-warning.outline:focus, .btn-warning.outline:active, .btn-warning.outline.active, .open > .dropdown-toggle.btn-warning { border-color: #eba259; color: #eba259; } .btn-warning.outline:active, .btn-warning.outline.active { border-color: #b87430; color: #b87430; box-shadow: none; } .btn-danger.outline { border: 2px solid #f25454; color: #f25454; } .btn-danger.outline:hover, .btn-danger.outline:focus, .btn-danger.outline:active, .btn-danger.outline.active, .open > .dropdown-toggle.btn-danger { border-color: #f26d6d; color: #f26d6d; } .btn-danger.outline:active, .btn-danger.outline.active { border-color: #bf4343; color: #bf4343; box-shadow: none; } .btn-primary.gradient { background: -moz-linear-gradient(top, #33a6cc 50%, #0099cc 50%); background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#33a6cc), color-stop(50%,#0099cc)); background: -webkit-linear-gradient(top, #33a6cc 50%,#0099cc 50%); background: -o-linear-gradient(top, #33a6cc 50%,#0099cc 50%); background: -ms-linear-gradient(top, #33a6cc 50%,#0099cc 50%); background: linear-gradient(to bottom, #33a6cc 50%,#0099cc 50%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33a6cc', endColorstr='#0099cc',GradientType=0 ); } .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, #66b2cc 50%, #33a6cc 50%); background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#66b2cc), color-stop(50%,#33a6cc)); background: -webkit-linear-gradient(top, #66b2cc 50%,#33a6cc 50%); background: -o-linear-gradient(top, #66b2cc 50%,#33a6cc 50%); background: -ms-linear-gradient(top, #66b2cc 50%,#33a6cc 50%); background: linear-gradient(to bottom, #66b2cc 50%,#33a6cc 50%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66b2cc', endColorstr='#33a6cc',GradientType=0 ); } .btn-primary.gradient:active, .btn-primary.gradient.active { background: -moz-linear-gradient(top, #267c99 50%, #007299 50%); background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#267c99), color-stop(50%,#007299)); background: -webkit-linear-gradient(top, #267c99 50%,#007299 50%); background: -o-linear-gradient(top, #267c99 50%,#007299 50%); background: -ms-linear-gradient(top, #267c99 50%,#007299 50%); background: linear-gradient(to bottom, #267c99 50%,#007299 50%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#267c99', endColorstr='#007299',GradientType=0 ); } .btn-success.gradient { background: -moz-linear-gradient(top, #39bf87 50%, #00bf6f 50%); background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#39bf87), color-stop(50%,#00bf6f)); background: -webkit-linear-gradient(top, #39bf87 50%,#00bf6f 50%); background: -o-linear-gradient(top, #39bf87 50%,#00bf6f 50%); background: -ms-linear-gradient(top, #39bf87 50%,#00bf6f 50%); background: linear-gradient(to bottom, #39bf87 50%,#00bf6f 50%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#39bf87', endColorstr='#00bf6f',GradientType=0 ); } .btn-success.gradient:hover, .btn-success.gradient:focus, .btn-success.gradient:active, .btn-success.gradient.active, .open > .dropdown-toggle.btn-success { background: -moz-linear-gradient(top, #73bf9f 50%, #39bf87 50%); background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#73bf9f), color-stop(50%,#39bf87)); background: -webkit-linear-gradient(top, #73bf9f 50%,#39bf87 50%); background: -o-linear-gradient(top, #73bf9f 50%,#39bf87 50%); background: -ms-linear-gradient(top, #73bf9f 50%,#39bf87 50%); background: linear-gradient(to bottom, #73bf9f 50%,#39bf87 50%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#73bf9f', endColorstr='#39bf87',GradientType=0 ); } .btn-success.gradient:active, .btn-success.gradient.active { background: -moz-linear-gradient(top, #2a8c63 50%, #008c52 50%); background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#2a8c63), color-stop(50%,#008c52)); background: -webkit-linear-gradient(top, #2a8c63 50%,#008c52 50%); background: -o-linear-gradient(top, #2a8c63 50%,#008c52 50%); background: -ms-linear-gradient(top, #2a8c63 50%,#008c52 50%); background: linear-gradient(to bottom, #2a8c63 50%,#008c52 50%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2a8c63', endColorstr='#008c52',GradientType=0 ); } .btn-info.gradient { background: -moz-linear-gradient(top, #5fd4e8 50%, #31cde8 50%); background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#5fd4e8), color-stop(50%,#31cde8)); background: -webkit-linear-gradient(top, #5fd4e8 50%,#31cde8 50%); background: -o-linear-gradient(top, #5fd4e8 50%,#31cde8 50%); background: -ms-linear-gradient(top, #5fd4e8 50%,#31cde8 50%); background: linear-gradient(to bottom, #5fd4e8 50%,#31cde8 50%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5fd4e8', endColorstr='#31cde8',GradientType=0 ); } .btn-info.gradient:hover, .btn-info.gradient:focus, .btn-info.gradient:active, .btn-info.gradient.active, .open > .dropdown-toggle.btn-info { background: -moz-linear-gradient(top, #8edae8 50%, #5fd4e8 50%); background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#8edae8), color-stop(50%,#5fd4e8)); background: -webkit-linear-gradient(top, #8edae8 50%,#5fd4e8 50%); background: -o-linear-gradient(top, #8edae8 50%,#5fd4e8 50%); background: -ms-linear-gradient(top, #8edae8 50%,#5fd4e8 50%); background: linear-gradient(to bottom, #8edae8 50%,#5fd4e8 50%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8edae8', endColorstr='#5fd4e8',GradientType=0 ); } .btn-info.gradient:active, .btn-info.gradient.active { background: -moz-linear-gradient(top, #6baab5 50%, #35a2b5 50%); background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#6baab5), color-stop(50%,#35a2b5)); background: -webkit-linear-gradient(top, #6baab5 50%,#35a2b5 50%); background: -o-linear-gradient(top, #6baab5 50%,#35a2b5 50%); background: -ms-linear-gradient(top, #6baab5 50%,#35a2b5 50%); background: linear-gradient(to bottom, #6baab5 50%,#35a2b5 50%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6baab5', endColorstr='#35a2b5',GradientType=0 ); } .btn-warning.gradient { background: -moz-linear-gradient(top, #eba259 50%, #eb8f34 50%); background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#eba259), color-stop(50%,#eb8f34)); background: -webkit-linear-gradient(top, #eba259 50%,#eb8f34 50%); background: -o-linear-gradient(top, #eba259 50%,#eb8f34 50%); background: -ms-linear-gradient(top, #eba259 50%,#eb8f34 50%); background: linear-gradient(to bottom, #eba259 50%,#eb8f34 50%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eba259', endColorstr='#eb8f34',GradientType=0 ); } .btn-warning.gradient:hover, .btn-warning.gradient:focus, .btn-warning.gradient:active, .btn-warning.gradient.active, .open > .dropdown-toggle.btn-warning { background: -moz-linear-gradient(top, #ebb57f 50%, #eba259 50%); background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#ebb57f), color-stop(50%,#eba259)); background: -webkit-linear-gradient(top, #ebb57f 50%,#eba259 50%); background: -o-linear-gradient(top, #ebb57f 50%,#eba259 50%); background: -ms-linear-gradient(top, #ebb57f 50%,#eba259 50%); background: linear-gradient(to bottom, #ebb57f 50%,#eba259 50%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebb57f', endColorstr='#eba259',GradientType=0 ); } .btn-warning.gradient:active, .btn-warning.gradient.active { background: -moz-linear-gradient(top, #b8824d 50%, #b87430 50%); background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#b8824d), color-stop(50%,#b87430)); background: -webkit-linear-gradient(top, #b8824d 50%,#b87430 50%); background: -o-linear-gradient(top, #b8824d 50%,#b87430 50%); background: -ms-linear-gradient(top, #b8824d 50%,#b87430 50%); background: linear-gradient(to bottom, #b8824d 50%,#b87430 50%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b8824d', endColorstr='#b87430',GradientType=0 ); } .btn-danger.gradient { background: -moz-linear-gradient(top, #f26d6d 50%, #f25454 50%); background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#f26d6d), color-stop(50%,#f25454)); background: -webkit-linear-gradient(top, #f26d6d 50%,#f25454 50%); background: -o-linear-gradient(top, #f26d6d 50%,#f25454 50%); background: -ms-linear-gradient(top, #f26d6d 50%,#f25454 50%); background: linear-gradient(to bottom, #f26d6d 50%,#f25454 50%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f26d6d', endColorstr='#f25454',GradientType=0 ); } .btn-danger.gradient:hover, .btn-danger.gradient:focus, .btn-danger.gradient:active, .btn-danger.gradient.active, .open > .dropdown-toggle.btn-danger { background: -moz-linear-gradient(top, #f28585 50%, #f26d6d 50%); background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#f28585), color-stop(50%,#f26d6d)); background: -webkit-linear-gradient(top, #f28585 50%,#f26d6d 50%); background: -o-linear-gradient(top, #f28585 50%,#f26d6d 50%); background: -ms-linear-gradient(top, #f28585 50%,#f26d6d 50%); background: linear-gradient(to bottom, #f28585 50%,#f26d6d 50%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f28585', endColorstr='#f26d6d',GradientType=0 ); } .btn-danger.gradient:active, .btn-danger.gradient.active { background: -moz-linear-gradient(top, #bf5656 50%, #bf4343 50%); background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#bf5656), color-stop(50%,#bf4343)); background: -webkit-linear-gradient(top, #bf5656 50%,#bf4343 50%); background: -o-linear-gradient(top, #bf5656 50%,#bf4343 50%); background: -ms-linear-gradient(top, #bf5656 50%,#bf4343 50%); background: linear-gradient(to bottom, #bf5656 50%,#bf4343 50%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf5656', endColorstr='#bf4343',GradientType=0 ); } .btn.round { border-radius: 24px; } .btn-lg.round { border-radius: 32px; } .btn-sm.round { border-radius: 14px; } .btn-xs.round { border-radius: 10px; } .btn-primary.raised { box-shadow: 0 3px 0 0 #007299; } .btn-primary.raised:active, .btn-primary.raised.active { background: #33a6cc; box-shadow: none; margin-bottom: -3px; margin-top: 3px; } .btn-success.raised { box-shadow: 0 3px 0 0 #008c52; } .btn-success.raised:active, .btn-success.raised.active { background: #39bf87; box-shadow: none; margin-bottom: -3px; margin-top: 3px; } .btn-info.raised { box-shadow: 0 3px 0 0 #35a2b5; } .btn-info.raised:active, .btn-info.raised.active { background: #5fd4e8; box-shadow: none; margin-bottom: -3px; margin-top: 3px; } .btn-warning.raised { box-shadow: 0 3px 0 0 #b87430; } .btn-warning.raised:active, .btn-warning.raised.active { background: #eba259; box-shadow: none; margin-bottom: -3px; margin-top: 3px; } .btn-danger.raised { box-shadow: 0 3px 0 0 #bf4343; } .btn-danger.raised:active, .btn-danger.raised.active { background: #f26d6d; box-shadow: none; margin-bottom: -3px; margin-top: 3px; } .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: 0px 4px; } .btn-sm.btn-default, .btn-sm.outline { padding: 6px 10px; } .btn-lg.btn-default, .btn-lg.outline { padding: 18px 38px; }