.sbb {
	width: 100%;
	height: 40px;
	border-width: 5px;
	border-style: solid;
	border-radius: 5px;
	display: inline-block;
	transition: width 0.2s;
}

.sbb.half {
	width: 50%;
	height: 30px;
}

.sbb.height:hover {
	height: 28px;
}

.sbb.height:active {
	height: 25px;
}

.sbb:hover:not(.height) {
	width: 98%;
}

.sbb:active:not(.height) {
	width: 95%;
}

.sbb.grey {
	background-color: darkgrey;
	border-color: grey;
}

.sbb.blue {
	background-color: mediumslateblue;
	border-color: #392759;
}

.sbb.green {
	background-color: #B5DDA4;
	border-color: #4DAA57;
}

.sbb.red {
	background-color: pink;
	border-color: darkred;
}

.sbb.brown {
	background-color: #513C2C;
	border-color: #28190E;
}

.sbb.aqua {
	background-color: #ACEDFF;
	border-color: #89BBFE;
}

.sbb.yellow {
	background-color: #FFD151;
	border-color: #F8C537;
}