CSS - Создание простых красивых кнопок

1. Главная
2. База знаний
3. CSS - Создание простых красивых кнопок

Ниже привожу часть CSS-кода, которая поможет быстро и просто стилизовать кнопки для сайтов. Код условно можно разделить на две части.

Первая часть, это стилизация базового класса .button, с помощью которого формируется основная динамика и структура кнопки. Вторая часть, это стилизация дополнительных классов для трех разных кнопок (.button-red, .button-blue, .button-green), от которых зависят только цвета кнопок.

Демонстрацию приведенного кода вы можете увидеть на этой странице.

/**/
	.button {
		display: inline-block;
		padding: 6px 12px;
		border: 1px solid transparent;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
		background-image: none;
		background-origin: border-box;
		background-color: #333;
		font-weight: normal;
		font-size: 12px;
		line-height: 20px;
		color: #fff;
		text-align: center;
		text-decoration: none;
		vertical-align: middle;
		cursor: pointer;
		-webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, .15);
		-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, .15);
		box-shadow: 0 2px 2px rgba(0, 0, 0, .15);
		font-family:'Trebuchet MS', sans-serif;
		text-transform:uppercase;
		background-image: -webkit-linear-gradient(top, rgba(107, 107, 107, .3), rgba(107, 107, 107, 0));
		background-image: -moz-linear-gradient(top, rgba(107, 107, 107, .3), rgba(107, 107, 107, 0));
		background-image: linear-gradient(to bottom, rgba(107, 107, 107, .3), rgba(107, 107, 107, 0));
		background-repeat: repeat-x;
	}

	.button:hover, .button:focus, .button:active {
		background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
		background-image: -moz-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
		background-image: linear-gradient(to bottom, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
	}

	.button:active {
		outline: 0;
		-webkit-box-shadow: inset 0 3px 4px rgba(0, 0, 0, .10);
		-moz-box-shadow: inset 0 3px 4px rgba(0, 0, 0, .10);
		box-shadow: inset 0 3px 4px rgba(0, 0, 0, .10);
	}

	.button-red {
		background-color:#C40900;
	}

	.button-blue {
		background-color:#0A1BB2;
	}

	.button-green {
		background-color:#3A963A;
	}

/**/