ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Подборка красивые кнопки CSS для uCoz

Подборка красивые кнопки CSS для uCoz

Сейчас делают очень много по дизайну и ставят совершенно другой дизайн, что можно заметить, и вот для этого вам Подборка красивые кнопки CSS для uCoz для того чтоб вы в некоторых местах на своем ресурсе могли установить не убирая стандартные. Так как при установки они не будут конфликтовать с теми, которые установлены до них. Это как пример можно установить в почту или обратная связь, некоторые ставят их на лицо сайта, так как они выполнены красиво по своему оригинально.

Всем привет друзья! Вот решил выложить оригинальные кнопки для ваших сайтов которые созданы в системе uCoz. В наборе будут идти не много не мало шесть вариантов оформления кнопок, но вы сможете легко изменять цвета через стили на тот цвет который вам больше всего по душе да и который больше подходит вашему сайту по его дизайну. Кнопочки устанавливаются легко так что я думаю у вас не возникнут трудности и вы установите легко, так же я думаю вы найдёте им достойное применение на своём сайте.

Установка кнопочек

В первую очередь вам нужно выбрать нужную кнопочку

Код

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

Далее мы пропишем основные стили данным кнопкам

Код

.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;
     }

Думаю что вы поняли как установить и то что кнопочки ставим в то место где она вам нужна а стили дописываем в самый низ ваших стилей сайта.

Установка кнопки CSS на сайт

Давайте разберемся вообще как можно установить кнопку, которая идет с колом и скриптом. И к примеру возьмем вид материала.

Установка кнопки CSS на сайт uCoz

Вот как можно заметить на вид материала не было не чего а написано было "Читать дальше" и там мы установили красивую кнопку, она не от этого материала, но суть также.

Вот тот самый код:

Код

<div class="ntext">$MESSAGE$</div> <a href="$ENTRY_URL$" style="float: right;" class="button24">Читать далее</a>

Вы с начало пропишите стили а потом здесь идет такой код.

Код

<a href="#" class="button button-brown">Кнопочка</a>

Нам нужно его доработать а точнее поставить, то что не хватает, а это MESSAGE и где написано кнопка, пишем Далее и должно так получиться.

Код

<a href="$MESSAGE$<" class="button button-brown">Читаем далее</a>

Но там есть дивы под стиль и их не нужно исключать так как это дизайн. Просто заменяем где у нас начинается span /span который и будет отвечать за ваш стиль кнопки. Но есть и просто, видим отправить написано, убираем и ставим наш код и стили и вместо отправить уже появиться то что нужно.

19 Сентября 2015 Просмотров: 3314 Комментариев: (7)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 7
Порядок вывода комментариев: FeStemBer 19 Сентября 2015 23:41¹ 0 Можно по подробней как их установить. Kosten 19 Сентября 2015 23:45² 0 Секунду, приготовлю материал и распишу. Kosten 20 Сентября 2015 00:02³ 0 Tventum, надеюсь понятно, просто ставим свой код и где написано кнопка, пишем то что нужно и на самой кнопке будет эта запись. FeStemBer 20 Сентября 2015 00:09⁴ 0 Kosten, все понятно, но сам догадался как их устанавливать, не чего сложного нет. Kosten 20 Сентября 2015 00:12⁵ 0 Ну и отлично, просто кажется что сложно, если посмотреть код и что заменить и где поставить куда переходить, то становиться понятно. Canon 20 Сентября 2015 02:06⁶ 0 Нормальные кнопки, но больше от гугл нравиться. Kosten 20 Сентября 2015 23:36⁷ 0 От гугл тоже не чего, их можно также в любой оттенок сделать. Сначало прописать стили и потом выставлять как описал, а что на весь сайт поставить и кнопки поменять к примеру в ответе, то и гугл и эти кнопки не подойдут. Там совершенно другая стилистика в CSS прописывается.