Генератор Кнопок CSS3 для сайта OnLine - Полезные ресурсы | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Воскресенье, 11.12.2016
Главная » Полезные ресурсы » Генераторы CSS & HTML


Генераторы изображенийГенераторы CSS & HTML
Генераторы цветаГенераторы онлайн
Поисковые системыКодировщики&Декодеры
Хранилища файловБелые каталоги сайтов
Бесплатные хостингиКаталог сайтов
Полезные страницыОнлайн игры
Сайты с картинкамиВидеохостинги
Заработать на сайте



Адаптивный сайт - aTmpl


Генератор Кнопок CSS3 для сайта OnLine

10.01.2013, 16:18

Генератор поможет Вам сделать свою кнопку для сайта




Сделать красивые кнопки стало намного проще,немного потраченного времени и Вы станете обладателем именно того экземпляра который Вас устроит.В качестве кнопки выступает код стилей с применением свойств CSS3,генератор отражает значения в свойствах по установленным параметрам регулировок.Нужно будет добавить свойство ширины width,оно не устанавливается генератором.Для установки свойства ширины нужно дописать свойство и поставить значение требуемой ширины,например (width:50px;) будет устанавливать ширину в 50 пикселей.Установленное свойство выделено в примере красным цветом,ширину выставлять нужно если элемент в котором находится кнопка имеет размер ширины и требуется заполнения родительского элемента.Не нужно обладать знаниями свойств каскадных таблиц,всё что потребуется это пошевелить ползунки и подогнать цвет.Надеюсь что любой сможет сделать то что нужно если захочет,если появятся вопросы или предложения по поводу этого материала воспользуйтесь формой комментариев в нижней части материала.




Способ подключения стилей для отображения кнопки


<style>
.button { width:50px; border-top: 1px solid #96d1f8; background: #65a9d7; background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7)); background: -moz-linear-gradient(top, #3e779d, #65a9d7); background: -o-linear-gradient(top, #3e779d, #65a9d7); padding: 19.5px 39px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0; -moz-box-shadow: rgba(0,0,0,1) 0 1px 0; box-shadow: rgba(0,0,0,1) 0 1px 0; text-shadow: rgba(0,0,0,.4) 0 1px 0; color: #fcfaf7; font-size: 16px; font-family: Georgia, serif; text-decoration: none; vertical-align: middle; } .button:hover { color: #ccc; background: #5c96b8; background: -webkit-gradient(linear, left top, left bottom, from(#37dbc5), to(#5c96b8)); background: -moz-linear-gradient(top, #37dbc5, #5c96b8); background: -o-linear-gradient(top, #37dbc5, #5c96b8); } .button:active { border-top-color: #d9327d; background: #d9327d; }
</style>
<div class="button">Кнопка</div>



Ещё один способ подключения

В этом примере не указываются стили для тегов <ul>,<li> и <a>.Они обычно уже прописаны в основных стилях сайта,поэтому не буду нагружать Вас лишними добавлениями в код.




<style>
.button { width:50px; border-top: 1px solid #96d1f8; background: #65a9d7; background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7)); background: -moz-linear-gradient(top, #3e779d, #65a9d7); background: -o-linear-gradient(top, #3e779d, #65a9d7); padding: 19.5px 39px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0; -moz-box-shadow: rgba(0,0,0,1) 0 1px 0; box-shadow: rgba(0,0,0,1) 0 1px 0; text-shadow: rgba(0,0,0,.4) 0 1px 0; color: #fcfaf7; font-size: 16px; font-family: Georgia, serif; text-decoration: none; vertical-align: middle; } .button:hover { color: #ccc; background: #5c96b8; background: -webkit-gradient(linear, left top, left bottom, from(#37dbc5), to(#5c96b8)); background: -moz-linear-gradient(top, #37dbc5, #5c96b8); background: -o-linear-gradient(top, #37dbc5, #5c96b8); } .button:active { border-top-color: #d9327d; background: #d9327d; }
</style>
<ul>
<li class="button"><a href="">Кнопка</a></li>
<li class="button"><a href="">Кнопка</a></li>
<li class="button"><a href="">Кнопка</a></li>
</ul>



Проверьте вариант примера в редакторе





  Снимок сайта   
  • Перейти на сайт



  • Русские шрифты





    Переходов: 706 | Добавил: IZOTOP | Рейтинг: 5.0/3 | Теги: кнопки, button, самому, CSS3, на сайт, свою

    Комментариев - относящихся к материалу: 0

    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]