Ik heb laatst voor iemand een fraaie button ontworpen - eigenlijk zou je zoiets als boilerplate moeten kunnen gebruiken.

Eerst 's kijken hoe hij er hier uitziet:

Oh, leuk smile.

Om 'm te centreren moet de wrapping <p> gecentreerd worden.

Er is best een flink stuk css voor nodig, maar dan heb je ook wat. De afmetingen zijn uiteraard simpel aan te passen.
Het font moet ook aangepast worden, anders haalt-ie Helvetica Neue uit de template css.

Ik moet 't ergens bewaren, dus maar hier: de css.

/*** MY FAVOURITE BUTTON ***/
/* Caveat: font-family definieren, anders paktie helvetica uit template.css */

:root {
  --btnkleurdonk: #226026;
  --btnkleurlicht: #7da421;
  --btnborder: #004d5b;
}

button.favbtn {
	-moz-box-shadow: 1px 1px 2px 0px var(--btnborder);
	-webkit-box-shadow: 1px 1px 2px 0px var(--btnborder);
	box-shadow: 1px 1px 2px 0px var(--btnborder);
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, var(--btnkleurdonk)), color-stop(1, var(--btnkleurlicht)));
	background:-moz-linear-gradient(top, var(--btnkleurdonk) 5%, var(--btnkleurlicht) 100%);
	background:-webkit-linear-gradient(top, var(--btnkleurdonk) 5%, var(--btnkleurlicht) 100%);
	background:-o-linear-gradient(top, var(--btnkleurdonk) 5%, var(--btnkleurlicht) 100%);
	background:-ms-linear-gradient(top, var(--btnkleurdonk) 5%, var(--btnkleurlicht) 100%);
	background:linear-gradient(to bottom, var(--btnkleurdonk) 5%, var(--btnkleurlicht) 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='var(--btnkleurdonk)', endColorstr='var(--btnkleurlicht)',GradientType=0);
	background-color:var(--btnkleurdonk);
	-webkit-border-radius:20px;
	-moz-border-radius:20px;
	border-radius:20px;
	border:1px solid var(--btnborder);
	display:inline-block;
	cursor:pointer;
	color: white;
	font-family: 'Roboto', sans-serif;
	font-size:24px;
    line-height: 125%;
    margin: 1em 0;
	padding: 1em 2em;
	text-decoration:none;
	text-shadow:1px 2px 2px var(--btnborder);
}
button.favbtn:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, var(--btnkleurlicht)), color-stop(1, var(--btnkleurdonk)));
	background:-moz-linear-gradient(top, var(--btnkleurlicht) 5%, var(--btnkleurdonk) 100%);
	background:-webkit-linear-gradient(top, var(--btnkleurlicht) 5%, var(--btnkleurdonk) 100%);
	background:-o-linear-gradient(top, var(--btnkleurlicht) 5%, var(--btnkleurdonk) 100%);
	background:-ms-linear-gradient(top, var(--btnkleurlicht) 5%, var(--btnkleurdonk) 100%);
	background:linear-gradient(to bottom, var(--btnkleurlicht) 5%, var(--btnkleurdonk) 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='var(--btnkleurlicht)', endColorstr='var(--btnkleurdonk)',GradientType=0);
	background-color:var(--btnkleurlicht);
}
button.favbtn:active {
	position:relative;
	top:1px;
}