• Страница 1 из 1
  • 1
Создать красивые кнопки на CSS для сайта
Kosten
Понедельник, 25 Января 2016, 23:21 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
Вы иногда замечаете на сайте стоит кнопка с красивым эффектом, все просто, теперь вы можете установить такую. Для этого нужен специальный сервис, который и будет в ручном режиме работать. А точнее с правой стороны будут кнопки, как заготовка, вы выбираете и потом сами выставляете тени или что вам нужно, там поменять цвет, или красивый прогиб при наведение. Все как видите что кнопка готова, нажимает с начало на код и получаем его, это может быть к примеру такой.



Код
<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 (16.0 Kb)
Страна: (RU)
Nikas
Понедельник, 25 Января 2016, 23:24 | Сообщение 2
Оффлайн
Проверенные
Сообщений:229
Награды: 3
я так понял Horizontal не автоматический. wacko
Страна: (UA)
Kosten
Понедельник, 25 Января 2016, 23:26 | Сообщение 3
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
Dixes, нет конечно, где можно видеть автомат, все ручками сам делаешь и это нормально, для себя же все создаешь.
Страна: (RU)
Nikas
Понедельник, 25 Января 2016, 23:27 | Сообщение 4
Оффлайн
Проверенные
Сообщений:229
Награды: 3
Цитата Kosten ()
Dixes, нет конечно, где можно видеть автомат, все ручками сам делаешь и это нормально, для себя же все создаешь.


выдел сервис с автоматическим, но стили ужасные создавал он biggrin
Страна: (UA)
Kosten
Понедельник, 25 Января 2016, 23:31 | Сообщение 5
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
Цитата Dixes ()
выдел сервис с автоматическим, но стили ужасные создавал он

Но нужно прекрасно понимать, что ты сам делаешь, как можно что то задать и чтоб сделали кнопку, здесь весь дизайн у тебя в руках.
Страна: (RU)
Nikas
Понедельник, 25 Января 2016, 23:33 | Сообщение 6
Оффлайн
Проверенные
Сообщений:229
Награды: 3
Цитата Kosten ()
Но нужно прекрасно понимать, что ты сам делаешь, как можно что то задать и чтоб сделали кнопку, здесь весь дизайн у тебя в руках.


но всегда изменяешь после бота(php)
Страна: (UA)
Kosten
Понедельник, 25 Января 2016, 23:35 | Сообщение 7
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
На сайте нет бота на php cool
Страна: (RU)
  • Страница 1 из 1
  • 1
Поиск: