some nice simple buttons large and small

5:25 am, March 6, 2018

Here are some buttons, with large and small versions. based loosely on the bootstrap buttons. The play font is the default, and then Open Sans for these ones, but you can switch it out to something more exciting if needed. Updates: - added slight drop shadow to button text

Code

html

css

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import url('https://fonts.googleapis.com/css?family=Play');
a.btn {
	text-decoration:none;
}
a.btn.btn-primary {
	color:#FFF;
}
a.btn.btn-dark {
	color:#FFF;
}
.btn {
	font-family:"Play", "Open Sans",sans-serif;
	display:inline-block;
	font-weight:400;
	line-height:1.25;
	text-align:center;
	white-space:nowrap;
	vertical-align:middle;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	border:1px solid transparent;
	padding:.5rem 1rem;
	font-size:1rem;
	border-radius:.25rem;
	-webkit-transition:all .2s ease-in-out;
	-o-transition:all .2s ease-in-out;
	transition:all .2s ease-in-out;
	cursor:pointer;
	margin-bottom:5px;
	text-shadow:0px 1px 2px rgba(0,0,0,0.3);
}
.btn-primary {
	color:#fff;
	background-color:#0275d8;
	border-color:#0275d8;
}
.btn-primary:hover {
	color:#fff;
	background-color:#025aa5;
	border-color:#01549b;
}
.btn-dark {
	color:#fff;
	background-color:#353535;
	border-color:#212121;
}
.btn-dark:hover {
	color:#fff;
	background-color:#212121;
	border-color:#000;
}
.small-button {
	padding:3px 5px;
	font-size: 14px;
}

scripts

Download & Run

Download File Run Demo Re-load Preview