Страница 1 из 11
Форум про uCoz » Всё для web-мастера » Web мастеру » Создать красивые кнопки на CSS для сайта
Создать красивые кнопки на CSS для сайта
Kosten
Дата: Понедельник, 25.01.2016, 23:21 | Сообщение # 1
Администраторы
Сообщений:12716
Награды: 39


Вы иногда замечаете на сайте стоит кнопка с красивым эффектом, все просто, теперь вы можете установить такую. Для этого нужен специальный сервис, который и будет в ручном режиме работать. А точнее с правой стороны будут кнопки, как заготовка, вы выбираете и потом сами выставляете тени или что вам нужно, там поменять цвет, или красивый прогиб при наведение. Все как видите что кнопка готова, нажимает с начало на код и получаем его, это может быть к примеру такой.



Код
<a href="#" class="myButton">themeforest</a>


Потом на стили жмем и получаем CSS на ее, как пример делал одну.

Код
.myButton {
    -moz-box-shadow:inset 0px 1px 0px 0px #5e91c4;
    -webkit-box-shadow:inset 0px 1px 0px 0px #5e91c4;
    box-shadow:inset 0px 1px 0px 0px #5e91c4;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #7aa3f5), color-stop(1, #17536e));
    background:-moz-linear-gradient(top, #7aa3f5 5%, #17536e 100%);
    background:-webkit-linear-gradient(top, #7aa3f5 5%, #17536e 100%);
    background:-o-linear-gradient(top, #7aa3f5 5%, #17536e 100%);
    background:-ms-linear-gradient(top, #7aa3f5 5%, #17536e 100%);
    background:linear-gradient(to bottom, #7aa3f5 5%, #17536e 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7aa3f5', endColorstr='#17536e',GradientType=0);
    background-color:#7aa3f5;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    border:1px solid #3884ff;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:13px;
    padding:6px 14px;
    text-decoration:none;
    text-shadow:0px 1px 0px #072133;
}
.myButton:hover {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #17536e), color-stop(1, #7aa3f5));
    background:-moz-linear-gradient(top, #17536e 5%, #7aa3f5 100%);
    background:-webkit-linear-gradient(top, #17536e 5%, #7aa3f5 100%);
    background:-o-linear-gradient(top, #17536e 5%, #7aa3f5 100%);
    background:-ms-linear-gradient(top, #17536e 5%, #7aa3f5 100%);
    background:linear-gradient(to bottom, #17536e 5%, #7aa3f5 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#17536e', endColorstr='#7aa3f5',GradientType=0);
    background-color:#17536e;
}
.myButton:active {
    position:relative;
    top:1px;
}


Все ваша кнопка готова и ставим на сайт, чтоб сделать переходим на этой ссылки на конструктор.
Прикрепления: 3843827.png(16Kb)


Dixes
Дата: Понедельник, 25.01.2016, 23:24 | Сообщение # 2
Vip
Сообщений:136
Награды: 2


я так понял Horizontal не автоматический. wacko
Kosten
Дата: Понедельник, 25.01.2016, 23:26 | Сообщение # 3
Администраторы
Сообщений:12716
Награды: 39


Dixes, нет конечно, где можно видеть автомат, все ручками сам делаешь и это нормально, для себя же все создаешь.

Dixes
Дата: Понедельник, 25.01.2016, 23:27 | Сообщение # 4
Vip
Сообщений:136
Награды: 2


Цитата Kosten ()
Dixes, нет конечно, где можно видеть автомат, все ручками сам делаешь и это нормально, для себя же все создаешь.


выдел сервис с автоматическим, но стили ужасные создавал он biggrin
Kosten
Дата: Понедельник, 25.01.2016, 23:31 | Сообщение # 5
Администраторы
Сообщений:12716
Награды: 39


Цитата Dixes ()
выдел сервис с автоматическим, но стили ужасные создавал он

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


Dixes
Дата: Понедельник, 25.01.2016, 23:33 | Сообщение # 6
Vip
Сообщений:136
Награды: 2


Цитата Kosten ()
Но нужно прекрасно понимать, что ты сам делаешь, как можно что то задать и чтоб сделали кнопку, здесь весь дизайн у тебя в руках.


но всегда изменяешь после бота(php)
Kosten
Дата: Понедельник, 25.01.2016, 23:35 | Сообщение # 7
Администраторы
Сообщений:12716
Награды: 39


На сайте нет бота на php cool

Форум про uCoz » Всё для web-мастера » Web мастеру » Создать красивые кнопки на CSS для сайта
Страница 1 из 11
Поиск: