Лого www.SiteHere.ru

Легкие стили и эффекты для кнопок

Сегодня мы хотели бы поделиться некоторыми свежими стилями и эффектами для кнопок. В наборе есть много разных эффектов, которые помогут немного “ оживить ” страницу.

Для начала необходимо скачать исходники, и выбрать тему оформления для кнопок. Вы можете взять то оформление, которое вам понравится. Для примера возьмём первую тему winona.

Смотреть примерСкачать

Похожие статьи на эту тему:

Открываем в редакторе файл index.html из исходника, находим интересующий нас тег. В моем случае:

HTML КОД
1
2
3
4
5
6
<h2>Winona</h2>
<div class="box bg-1">
    <button class="button button--winona button--border-thin button--round-s"><span>Ссылка 1</span></button>
    <button class="button button--winona button--border-thin button--round-s"><span>Ссылка 2</span></button>
    <button class="button button--winona button--border-thin button--round-s"><span>Ссылка 3</span></button>
</div>

Из этого кода берём строку с классом button.

HTML КОД
1
<button class="button button--winona button--border-thin button--round-s"><span>Ссылка 1</span></button>

Вставляем код в любое необходимое место в файле с кодом нашего проекта между тегом <body>.
Название кнопки измените на то, которое нужно вам. В моем случае название я изменю на “Открыть”

HTML КОД
1
<button class="button button--winona button--border-thin button--round-s"><span> Открыть </span></button>

Подключаем стили

Возвращаемся в файл из исходника и между тегами <head> находим строку со стилем для кнопок.

1
<link rel="stylesheet" type="text/css" href="css/buttons.css" />

Копируем её и вставляем между тегами <head> в индексном файле своего проекта.

Далее необходимо скопировать сам файл со стилями buttons.css из исходника в свой проект в папку css.

Из примера видно, что определённый стиль кнопке добавляется с помощью дополнительного класса соответствующего названию темы оформления.

В нашем случае это класс button-winona. Следовательно, будут добавляться стили с названием winona.

Это очень удобно, т.к. если вам захочется сменить оформление кнопок, то нужно будет заменить лишь название дополнительного класса в теге <button>. А стили уже прописаны в файле button.css!

Вот и всё!

Успехов!

Источник: Оригинал

С Уважением, Михалев Валентин

Легкие стили и эффекты для кнопок 5.00/5 (100.00%) 1 голос(ов)

Понравилась статья - расскажи друзьям! :)

4 комментария к записи
  • Дмитрий

    Здравствуйте!

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

     
    • Юрий

      Здравствуйте, Дмитрий!
      Есть два варианта:
      1) Перенести стили на обычную ссылку.
      2) Дописать в тег button атрибут:

      onclick="window.open('http://www.sitehere.ru', '_blank');"

      Я думаю Вы видите куда необходимо вписать адрес страницы.

       
      • Дмитрий

        Юрий подскажите еще. Я могу использовать эти кнопки, эффекты, вкладки и многое другое с вашего сайта на любом движке?

         
        • Юрий

          Конечно, Дмитрий.

           

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *