Создаем красивые кнопки css почти не касаясь кода

Дата: / Автор поста:
Рубрика:

кнопки css
Привет на блоге wpsovet.ru. Эх ребята, когда же вы будете хоть маленько знать язык стилей? Этим вопросом я задавался уже 1000 раз, я хожу по блогам, гляжу на них, проверяю, ну интересно мне. Большинство из них просто захлебывается от ненужных файлов, а именно картинок, которые просто не нужны. Я разберу, как сделать кнопки css ресурсами, причем вообще без знания этого языка.

Ради чего пишу пост.

Суть сводится чтобы облегчить сайты и блоги, пока что в плане изображений, потому что ускорение должо быть на первом месте, а соответственно и нагрузка, вам для примера, вот это весит 5 Kb.
старый образец кнопок

А вот эта сделана с помощью классов, можно сказать что ничего не весит, может быть 0,0001 Kb.

Дизайн блога.

Усекли, ладно хватит воды, работать мы будем с сервисом css-tricks.com. Заходим на него, а далее смотрим на скриншот, и к нему разбор.

Разбор сайта.

настройки сервиса

  1. Предварительный просмотр, который действует в реальном времени без перезагрузок.
  2. Меню настройки величин, первая размер текста, вторая внутренние отступы, третья закругления.
  3. Цвет градиента вверху.
  4. Нижний оттенок.
  5. Обводка будущей CSS кнопки.
  6. Параметр hover, который отвечает за поведение элемента при наведении, в нашем случае это замена одного оттенка на другой.
  7. Это цвет текста.
  8. Оттенок текста при наведении.
  9. И конечный параметр active, это то как будет вести себя при нажатии, у нас это замена цвета еще раз.
  10. Тип шрифта, а точнее его семейство.

Мне нравится, что все не получается статичным, а наоборот, и при наведении, и нажатии, появляются всякие эффекты. Попробуйте сами, нажимайте.

Работа с кодом.

Не пугайтесь, у вас будут только две операции, копировать и вставить. Теперь жмем в предвариловке на саму кнопку, и в сплывающем окне предстанет необходимый код. Просто берем его и копируем.

копирование кода

Теперь идем в административную панель wordpress, далее внешний вид, потом редактор, выбираем для изменения файл style.css. А сейчас в самый низ вставляем то, что копировали на сервисе, и сохраняем, на снимке ниже все показано.
загрузка в активную тему

По умолчанию класс задается «button» в трех местах, если вы хотите прописать свой, то вводите любое название, это не принципиально.

Применяем на блоге.

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

<a href="http://wpsovet.ru/">Всем привет</a>

А вот так будет выглядеть, с прописанным классом.

<a class="button" href="http://wpsovet.ru/">Всем привет</a>

И такой принцип для всего, не бойтесь экспериментировать, надеюсь схема понятна.

На этом у меня все, как вам этот ресурс, понравился? Ответов жду в комментариях.

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(4 голоса, в среднем: 4.8 из 5)

С уважением к читателям Лифанов Валентин.

Нажмите на кнопку социальных сетей, вам не сложно, а мне приятно.

Комментарии к этой супер статье.

  • Андрей

    Мне понравился сервис, попробую применить на блоге.

    • Лифанов Валентин

      Андрей пробуй, я тоже для себя его недавно открыл. Кстате с рождеством тебя. Нашел тут еще один сайт, на котором можно делать движущиеся элементы чисто на css, без скриптов, напишу о нем тоже, но там уж код больно большой получается, но все же.

  • Андрей

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

    • Лифанов Валентин

      А я уже и забыл, скоро нпишу.

  • Александр

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

    • Лифанов Валентин

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

      • Александр

        Ну если не хотят знать и хотят что-то интересное поставить, тогда пусть ищут инфу, учатся или платят фрилансерам. Я просто высказал свое мнение. Очень много народу сегодня делают блоги, но установить тему это одно, а поменять дизайн или прикрутить какую-нибудь простую фишку приходится учится. Конечно если есть много денег, то можно и фрилансеру заплатить за настройки, а вот если их нет, то все равно придется учится

        • Лифанов Валентин

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

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

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

*

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

Лифанов Валентин. ©2014 Все права защищены. Полное или частичное копирование запрещено.