CSS Custom buttons

Posted on August 12, 2017August 23, 2017 by PeterPan

If you don’t won’t to use the default html buttons it’s easy to create your own styled buttons. Below I oppose two examples. You can additionally add border-radius and other styles to make it look nicer.

At the examples I chose div elements for the buttons, but you can easialy use span elements, so you don have to make the display inline-block.

.my-but-1{
	display: inline-block;
	padding: 5px 13px;
	background: #f44336;
	border: 1px solid #f44336;
	color: #fff;
	-webkit-transition: all .5s;
	transition: all .5s;
}
.my-but-1:hover{
	cursor:pointer;
	background: transparent;
	color: #000;
}
.my-but-1:active{
	background: red;
}

.my-but-2{
	display: inline-block;
	padding: 5px 30px;
	font-size: 18px;
	letter-spacing: 1px;
	background: #24bd24;
	border: 1px solid #24bd24;
	color: white;
	-webkit-transition: all .5s;
	transition: all .5s;
}
.my-but-2:hover{
	cursor:pointer;
	background: transparent;
	color: #24bd24;
}
.my-but-2:active{
	background: green;
}