Bootstrap
Herramientas y diseños css

Botones para bootstrap (2)

Diseño de botones y desplegables para bootstrap. Válidos para todos los tamaños de botones y desplegables. Estilos planos tipo material design de Android.

Diseño

Resultado

Default
Primary
Success
Info
Warning
Danger
Default
Primary
Success
Info
Warning
Danger
Default
Primary
Success
Info
Warning
Danger
Default
Primary
Success
Info
Warning
Danger

Código CSS


.btn-default {
	background-color: #fff;
	color: #333;
	border-color: #ccc;
}
.btn-default:focus, .btn-default.focus {
	background-color: #e6e6e6;
	color: #333;
	border-color: #8c8c8c;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}
.btn-default:hover {
	background-color: #e6e6e6;
	color: #333;
	border-color: #adadad;
	-webkit-box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
	-moz-box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.btn-default:active, .btn-default.active, .open>.dropdown-toggle.btn-default {
	background-color: #e6e6e6;
	color: #333;
	border-color: #adadad;
	-webkit-box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
	-moz-box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.btn-default:active:hover, .btn-default.active:hover, .open>.dropdown-toggle.btn-default:hover, .btn-default:active:focus, .btn-default.active:focus, .open>.dropdown-toggle.btn-default:focus, .btn-default:active.focus, .btn-default.active.focus, .open>.dropdown-toggle.btn-default.focus {
	background-color: #d4d4d4;
	color: #333;
	border-color: #8c8c8c;
	-webkit-box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
	-moz-box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.btn-default.disabled:hover,.btn-default[disabled]:hover,fieldset[disabled] .btn-default:hover,.btn-default.disabled:focus,.btn-default[disabled]:focus,fieldset[disabled] .btn-default:focus,.btn-default.disabled.focus,.btn-default[disabled].focus,fieldset[disabled] .btn-default.focus {
	background-color: #fff;
	color: #333;
	border-color: #ccc;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}
.btn-primary {
	background-color: #337ab7;
	color: #fff;
	border-color: #2e6da4;
}
.btn-primary:focus, .btn-primary.focus {
	background-color: #286090;
	color: #fff;
	border-color: #122b40;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}
.btn-primary:hover {
	background-color: #286090;
	color: #fff;
	border-color: #204d74;
	-webkit-box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
	-moz-box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.btn-primary:active, .btn-primary.active, .open>.dropdown-toggle.btn-primary {
	background-color: #286090;
	color: #fff;
	border-color: #204d74;
	-webkit-box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
	-moz-box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.btn-primary:active:hover, .btn-primary.active:hover, .open>.dropdown-toggle.btn-primary:hover, .btn-primary:active:focus, .btn-primary.active:focus, .open>.dropdown-toggle.btn-primary:focus, .btn-primary:active.focus, .btn-primary.active.focus, .open>.dropdown-toggle.btn-primary.focus {
	background-color: #204d74;
	color: #fff;
	border-color: #122b40;
	-webkit-box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
	-moz-box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.btn-primary.disabled:hover,.btn-primary[disabled]:hover,fieldset[disabled] .btn-primary:hover,.btn-primary.disabled:focus,.btn-primary[disabled]:focus,fieldset[disabled] .btn-primary:focus,.btn-primary.disabled.focus,.btn-primary[disabled].focus,fieldset[disabled] .btn-primary.focus {
	background-color: #337ab7;
	color: #fff;
	border-color: #2e6da4;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}
.btn-success {
	background-color: #5cb85c;
	color: #fff;
	border-color: #4cae4c;
}
.btn-success:focus, .btn-success.focus {
	background-color: #449d44;
	color: #fff;
	border-color: #255625;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}
.btn-success:hover {
	background-color: #449d44;
	color: #fff;
	border-color: #398439;
	-webkit-box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
	-moz-box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.btn-success:active, .btn-success.active, .open>.dropdown-toggle.btn-success {
	background-color: #449d44;
	color: #fff;
	border-color: #398439;
	-webkit-box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
	-moz-box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.btn-success:active:hover, .btn-success.active:hover, .open>.dropdown-toggle.btn-success:hover, .btn-success:active:focus, .btn-success.active:focus, .open>.dropdown-toggle.btn-success:focus, .btn-success:active.focus, .btn-success.active.focus, .open>.dropdown-toggle.btn-success.focus {
	background-color: #398439;
	color: #fff;
	border-color: #255625;
	-webkit-box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
	-moz-box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.btn-success.disabled:hover,.btn-success[disabled]:hover,fieldset[disabled] .btn-success:hover,.btn-success.disabled:focus,.btn-success[disabled]:focus,fieldset[disabled] .btn-success:focus,.btn-success.disabled.focus,.btn-success[disabled].focus,fieldset[disabled] .btn-success.focus {
	background-color: #5cb85c;
	color: #fff;
	border-color: #4cae4c;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}
.btn-info {
	background-color: #5bc0de;
	color: #fff;
	border-color: #46b8da;
}
.btn-info:focus, .btn-info.focus {
	background-color: #31b0d5;
	color: #fff;
	border-color: #1b6d85;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}
.btn-info:hover {
	background-color: #31b0d5;
	color: #fff;
	border-color: #269abc;
	-webkit-box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
	-moz-box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.btn-info:active, .btn-info.active, .open>.dropdown-toggle.btn-info {
	background-color: #31b0d5;
	color: #fff;
	border-color: #269abc;
	-webkit-box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
	-moz-box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.btn-info:active:hover, .btn-info.active:hover, .open>.dropdown-toggle.btn-info:hover, .btn-info:active:focus, .btn-info.active:focus, .open>.dropdown-toggle.btn-info:focus, .btn-info:active.focus, .btn-info.active.focus, .open>.dropdown-toggle.btn-info.focus {
	background-color: #269abc;
	color: #fff;
	border-color: #1b6d85;
	-webkit-box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
	-moz-box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.btn-info.disabled:hover,.btn-info[disabled]:hover,fieldset[disabled] .btn-info:hover,.btn-info.disabled:focus,.btn-info[disabled]:focus,fieldset[disabled] .btn-info:focus,.btn-info.disabled.focus,.btn-info[disabled].focus,fieldset[disabled] .btn-info.focus {
	background-color: #5bc0de;
	color: #fff;
	border-color: #46b8da;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}
.btn-warning {
	background-color: #f0ad4e;
	color: #fff;
	border-color: #eea236;
}
.btn-warning:focus, .btn-warning.focus {
	background-color: #ec971f;
	color: #fff;
	border-color: #985f0d;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}
.btn-warning:hover {
	background-color: #ec971f;
	color: #fff;
	border-color: #d58512;
	-webkit-box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
	-moz-box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.btn-warning:active, .btn-warning.active, .open>.dropdown-toggle.btn-warning {
	background-color: #ec971f;
	color: #fff;
	border-color: #d58512;
	-webkit-box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
	-moz-box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.btn-warning:active:hover, .btn-warning.active:hover, .open>.dropdown-toggle.btn-warning:hover, .btn-warning:active:focus, .btn-warning.active:focus, .open>.dropdown-toggle.btn-warning:focus, .btn-warning:active.focus, .btn-warning.active.focus, .open>.dropdown-toggle.btn-warning.focus {
	background-color: #d58512;
	color: #fff;
	border-color: #985f0d;
	-webkit-box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
	-moz-box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.btn-warning.disabled:hover,.btn-warning[disabled]:hover,fieldset[disabled] .btn-warning:hover,.btn-warning.disabled:focus,.btn-warning[disabled]:focus,fieldset[disabled] .btn-warning:focus,.btn-warning.disabled.focus,.btn-warning[disabled].focus,fieldset[disabled] .btn-warning.focus {
	background-color: #f0ad4e;
	color: #fff;
	border-color: #eea236;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}
.btn-danger {
	background-color: #d9534f;
	color: #fff;
	border-color: #d43f3a;
}
.btn-danger:focus, .btn-danger.focus {
	background-color: #c9302c;
	color: #fff;
	border-color: #761c19;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}
.btn-danger:hover {
	background-color: #c9302c;
	color: #fff;
	border-color: #ac2925;
	-webkit-box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
	-moz-box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.btn-danger:active, .btn-danger.active, .open>.dropdown-toggle.btn-danger {
	background-color: #c9302c;
	color: #fff;
	border-color: #ac2925;
	-webkit-box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
	-moz-box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.btn-danger:active:hover, .btn-danger.active:hover, .open>.dropdown-toggle.btn-danger:hover, .btn-danger:active:focus, .btn-danger.active:focus, .open>.dropdown-toggle.btn-danger:focus, .btn-danger:active.focus, .btn-danger.active.focus, .open>.dropdown-toggle.btn-danger.focus {
	background-color: #ac2925;
	color: #fff;
	border-color: #761c19;
	-webkit-box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
	-moz-box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.btn-danger.disabled:hover,.btn-danger[disabled]:hover,fieldset[disabled] .btn-danger:hover,.btn-danger.disabled:focus,.btn-danger[disabled]:focus,fieldset[disabled] .btn-danger:focus,.btn-danger.disabled.focus,.btn-danger[disabled].focus,fieldset[disabled] .btn-danger.focus {
	background-color: #d9534f;
	color: #fff;
	border-color: #d43f3a;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}
.btn-default, .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger {
	border-width: 1px;
	border-style: solid;
	border-radius: 25px;
	padding: 6px 12px 6px 12px;
	margin: 0px 1px 0px 0px;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	transition: all linear 0.2s;
}
.btn-xs,.btn-group-xs>.btn {
	padding:1px 5px 1px 5px;
	border-radius:23px;
}
.btn-sm,.btn-group-sm>.btn {
	padding:5px 10px 5px 10px;
	border-radius:23px;
}
.btn-lg,.btn-group-lg>.btn {
	padding:10px 16px 10px 16px;
	border-radius:26px;
}