CSS 26    CSS3 10    HTML 2    JavaScript 43    Wordpress 3    Блог 10    Инструменты 1    Не советую 1    Полезные ресурсы 4    Счетчики 1    Шпаргалки 6    Зарегистрироваться 267   Войти

Меню

Добро пожаловать, Гость! Вы можете Войти или Зарегистрироваться.

8

Красивые кнопки на CSS

Jemand 59376 , ,
CSS, CSS3

1 . CSS

.button {
	margin: 10px;
	text-decoration: none;
	font: bold 25px 'Trebuchet MS',Arial, Helvetica;
	display: inline-block;
	text-align: center;
	color: #fff;
	border: 1px solid #9c9c9c;
	border: 1px solid rgba(0, 0, 0, 0.3);
	text-shadow: 0 1px 0 rgba(0,0,0,0.4);
	box-shadow: 0 0 1px rgba(0,0,0,0.4);
	-moz-box-shadow: 0 0 1px rgba(0,0,0,0.4);
	-webkit-box-shadow: 0 0 1px rgba(0,0,0,0.4);
	}
.button, .button span {
	-moz-border-radius: 6px;
	border-radius: 6px;
	}
.button span {
	border-top: 1px solid #fff;
	border-top: 1px solid rgba(255, 255, 255, 0.5);
	display: block;
	padding: 12px 50px;
	background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(0, 0, 0, 0.05)), color-stop(.25, transparent), to(transparent)),
		-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(0, 0, 0, 0.05)), color-stop(.25, transparent), to(transparent)),
		-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, rgba(0, 0, 0, 0.05))),
		-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, rgba(0, 0, 0, 0.05)));
	background-image: -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent),
		-moz-linear-gradient(-45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent),
		-moz-linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%),
		-moz-linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%);
	-moz-background-size: 3px 3px;
	-webkit-background-size: 3px 3px;
	}
.button:hover {
	box-shadow: 0 0 1px rgba(0,0,0,0.4);
	-moz-box-shadow: 0 0 1px rgba(0,0,0,0.4);
	-webkit-box-shadow: 0 0 1px rgba(0,0,0,0.4);
	}
.button:active  {
	position: relative;
	top: 1px;
	}

/* Коричневая кнопка */
.button-brown {
	background: #8f3714;
	background: -webkit-gradient(linear, left top, left bottom, from(#bf6f50), to(#8f3714) );
	background: -moz-linear-gradient(-90deg, #bf6f50, #8f3714);
	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#bf6f50', EndColorStr='#8f3714');
	}
.button-brown:hover {
	background: #bf6f50;
	background: -webkit-gradient(linear, left top, left bottom, from(#8f3714), to(#bf6f50) );
	background: -moz-linear-gradient(-90deg, #8f3714, #bf6f50);
	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#8f3714', EndColorStr='#bf6f50');
	}
.button-brown:active {
	background: #8f3714;
	}
/* /Коричневая кнопка */

/* Оранжевая кнопка */
.button-orange {
	background: #f09c15;
	background: -webkit-gradient(linear, left top, left bottom, from(#f8c939), to(#f09c15) );
	background: -moz-linear-gradient(-90deg, #f8c939, #f09c15);
	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#f8c939', EndColorStr='#f09c15');
	}
.button-orange:hover {
	background: #f8c939;
	background: -webkit-gradient(linear, left top, left bottom, from(#f09c15), to(#f8c939) );
	background: -moz-linear-gradient(-90deg, #f09c15, #f8c939);
	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#f09c15', EndColorStr='#f8c939');
	}
.button-orange:active {
	background: #f09c15;
	}
/* /Оранжевая кнопка */

/* Фиолетовая кнопка */
.button-purple {
	background: #6F50E7;
	background: -webkit-gradient(linear, left top, left bottom, from(#B8A9F3), to(#6F50E7) );
	background: -moz-linear-gradient(-90deg, #B8A9F3, #6F50E7);
	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#B8A9F3', EndColorStr='#6F50E7');
	}
.button-purple:hover {
	background: #B8A9F3;
	background: -webkit-gradient(linear, left top, left bottom, from(#6F50E7), to(#B8A9F3) );
	background: -moz-linear-gradient(-90deg, #6F50E7, #B8A9F3);
	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#6F50E7', EndColorStr='#B8A9F3');
	}
.button-purple:active {
	background: #6F50E7;
	}
/* /Фиолетовая кнопка */

/* Зелёная кнопка */
.button-green {
	background: #428739;
	background: -webkit-gradient(linear, left top, left bottom, from(#c8dd95), to(#428739) );
	background: -moz-linear-gradient(-90deg, #c8dd95, #428739);
	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#c8dd95', EndColorStr='#428739');
	}
.button-green:hover {
	background: #c8dd95;
	background: -webkit-gradient(linear, left top, left bottom, from(#428739), to(#c8dd95) );
	background: -moz-linear-gradient(-90deg, #428739, #c8dd95);
	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#428739', EndColorStr='#c8dd95');
	}
.button-green:active {
	background: #428739;
	}
/* /Зелёная кнопка */

/* Голубая кнопка */
.button-blue {
	background: #4477a1;
	background: -webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1) );
	background: -moz-linear-gradient(-90deg, #81a8cb, #4477a1);
	filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');
	}
.button-blue:hover {
	background: #81a8cb;
	background: -webkit-gradient(linear, left top, left bottom, from(#4477a1), to(#81a8cb) );
	background: -moz-linear-gradient(-90deg, #4477a1, #81a8cb);
	filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4477a1', endColorstr='#81a8cb');
	}
.button-blue:active  {
	background: #4477a1;
	}
/* /Голубая кнопка */

/* Красная кнопка */
.button-red {
	background: #D82741;
	background: -webkit-gradient(linear, left top, left bottom, from(#E84B6E), to(#D82741) );
	background: -moz-linear-gradient(-90deg, #E84B6E, #D82741);
	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#E84B6E', EndColorStr='#D82741');
	}
.button-red:hover {
	background: #E84B6E;
	background: -webkit-gradient(linear, left top, left bottom, from(#D82741), to(#E84B6E) );
	background: -moz-linear-gradient(-90deg, #D82741, #E84B6E);
	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#D82741', EndColorStr='#E84B6E');
	}
.button-red:active {
	background: #D82741;
	}
/* /Красная кнопка */

2. HTML

<a href="#" class="button button-brown"><span>Кнопочка</span></a>
<a href="#" class="button button-orange"><span>Кнопочка</span></a>
<a href="#" class="button button-purple"><span>Кнопочка</span></a>
<a href="#" class="button button-green"><span>Кнопочка</span></a>
<a href="#" class="button button-blue"><span>Кнопочка</span></a>
<a href="#" class="button button-red"><span>Кнопочка</span></a>

Рекламная пауза

» 8 комментариев

  1. Очень прикольно, но к сожалению не работает в IE8 :( (((

  2. У меня почему-то не кнопка – а просто надпись “Кнопочка” и сслыка и всё, всм всё сделал а самой кнопки нету, только эта надпись

  3. Сначала копируйте общие стили что сверху, а потом конкретно по каждой кнопке классы.
    Если вы выбрали синюю кнопку, то для нее сначала общие стили button а потом для класса блюе.

  4. А у меня в IE 8 работает!

  5. Ждал чего-то лучшего))


Оставить комментарий