CSS: creare i pulsanti di un framework

In questo articolo vedremo come implementare un componente fondamentale di qualsiasi framework CSS, ossia i pulsanti.

I nostri pulsanti potranno essere elementi a, button o input, quindi i nostri stili dovranno tenere conto delle differenze esistenti a livello di stili predefiniti nei browser.

.my-button {
	-webkit-appearance: none;
	border: none;
	overflow: visible;
	display: inline-block;
	box-sizing: border-box;
	padding: 0 0.75em;
	vertical-align: middle;
	text-decoration: none;
	line-height: 1.8;
	min-height: 1.8em;
	text-align: center;
}

.my-button:not(:disabled) { 
	cursor: pointer; 
}

.my-button:hover,
.my-button:focus {
    outline: none;
    text-decoration: none;
}

.my-button-mini {
	min-height: 1.25em;
	line-height: 1.25;
	padding: 0 0.37em;
	
}

.my-button-small {
	min-height: 1.56em;
	line-height: 1.56;
	padding: 0 0.62em;
}

.my-button-large {
	min-height: 2.5em;
	line-height: 2.5;
	padding: 0 0.93em;
}

Non abbiamo definito colori e sfondi per un motivo preciso: definirli significa costringere chi usa i nostri stili a sovrascrivere le nostre dichiarazioni qualora le nostre scelte non rispecchiano il design del tema in uso.