knopkicss4

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

СОДЕРЖАНИЕ
8
01 февраля 2019

кнопки 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="https://wpsovet.ru/">Всем привет</a>

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

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

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

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

Комментировать
8
Комментарии

  1. Warning: is_file(): open_basedir restriction in effect. File(/home/v/valent5k/wpsovet.ru/public_html/wp-content/uploads/gravatar/5b1693d9083c24e62c41e49ff92e131f-s50.jpg) is not within the allowed path(s): (/var/www/b5821/data:.) in /var/www/b5821/data/www/wpsovet.ru/wp-content/plugins/nix-gravatar-cache/nf-gravatar-cache.php on line 164

    Warning: fopen(): open_basedir restriction in effect. File(/home/v/valent5k/wpsovet.ru/public_html/wp-content/uploads/gravatar/5b1693d9083c24e62c41e49ff92e131f-s50.jpg) is not within the allowed path(s): (/var/www/b5821/data:.) in /var/www/b5821/data/www/wpsovet.ru/wp-content/plugins/nix-gravatar-cache/nf-gravatar-cache.php on line 206

    Warning: fopen(/home/v/valent5k/wpsovet.ru/public_html/wp-content/uploads/gravatar/5b1693d9083c24e62c41e49ff92e131f-s50.jpg): failed to open stream: Operation not permitted in /var/www/b5821/data/www/wpsovet.ru/wp-content/plugins/nix-gravatar-cache/nf-gravatar-cache.php on line 206

    Warning: fwrite() expects parameter 1 to be resource, boolean given in /var/www/b5821/data/www/wpsovet.ru/wp-content/plugins/nix-gravatar-cache/nf-gravatar-cache.php on line 208

    Warning: fclose() expects parameter 1 to be resource, boolean given in /var/www/b5821/data/www/wpsovet.ru/wp-content/plugins/nix-gravatar-cache/nf-gravatar-cache.php on line 209
    Андрей ()
    Ответить

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


    • Warning: is_file(): open_basedir restriction in effect. File(/home/v/valent5k/wpsovet.ru/public_html/wp-content/uploads/gravatar/458c441fbb7710b73e0eccd1e3400841-s50.jpg) is not within the allowed path(s): (/var/www/b5821/data:.) in /var/www/b5821/data/www/wpsovet.ru/wp-content/plugins/nix-gravatar-cache/nf-gravatar-cache.php on line 164

      Warning: fopen(): open_basedir restriction in effect. File(/home/v/valent5k/wpsovet.ru/public_html/wp-content/uploads/gravatar/458c441fbb7710b73e0eccd1e3400841-s50.jpg) is not within the allowed path(s): (/var/www/b5821/data:.) in /var/www/b5821/data/www/wpsovet.ru/wp-content/plugins/nix-gravatar-cache/nf-gravatar-cache.php on line 206

      Warning: fopen(/home/v/valent5k/wpsovet.ru/public_html/wp-content/uploads/gravatar/458c441fbb7710b73e0eccd1e3400841-s50.jpg): failed to open stream: Operation not permitted in /var/www/b5821/data/www/wpsovet.ru/wp-content/plugins/nix-gravatar-cache/nf-gravatar-cache.php on line 206

      Warning: fwrite() expects parameter 1 to be resource, boolean given in /var/www/b5821/data/www/wpsovet.ru/wp-content/plugins/nix-gravatar-cache/nf-gravatar-cache.php on line 208

      Warning: fclose() expects parameter 1 to be resource, boolean given in /var/www/b5821/data/www/wpsovet.ru/wp-content/plugins/nix-gravatar-cache/nf-gravatar-cache.php on line 209
      Лифанов Валентин ()
      Ответить

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


  2. Warning: is_file(): open_basedir restriction in effect. File(/home/v/valent5k/wpsovet.ru/public_html/wp-content/uploads/gravatar/5b1693d9083c24e62c41e49ff92e131f-s50.jpg) is not within the allowed path(s): (/var/www/b5821/data:.) in /var/www/b5821/data/www/wpsovet.ru/wp-content/plugins/nix-gravatar-cache/nf-gravatar-cache.php on line 164

    Warning: fopen(): open_basedir restriction in effect. File(/home/v/valent5k/wpsovet.ru/public_html/wp-content/uploads/gravatar/5b1693d9083c24e62c41e49ff92e131f-s50.jpg) is not within the allowed path(s): (/var/www/b5821/data:.) in /var/www/b5821/data/www/wpsovet.ru/wp-content/plugins/nix-gravatar-cache/nf-gravatar-cache.php on line 206

    Warning: fopen(/home/v/valent5k/wpsovet.ru/public_html/wp-content/uploads/gravatar/5b1693d9083c24e62c41e49ff92e131f-s50.jpg): failed to open stream: Operation not permitted in /var/www/b5821/data/www/wpsovet.ru/wp-content/plugins/nix-gravatar-cache/nf-gravatar-cache.php on line 206

    Warning: fwrite() expects parameter 1 to be resource, boolean given in /var/www/b5821/data/www/wpsovet.ru/wp-content/plugins/nix-gravatar-cache/nf-gravatar-cache.php on line 208

    Warning: fclose() expects parameter 1 to be resource, boolean given in /var/www/b5821/data/www/wpsovet.ru/wp-content/plugins/nix-gravatar-cache/nf-gravatar-cache.php on line 209
    Андрей ()
    Ответить

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


    • Warning: is_file(): open_basedir restriction in effect. File(/home/v/valent5k/wpsovet.ru/public_html/wp-content/uploads/gravatar/458c441fbb7710b73e0eccd1e3400841-s50.jpg) is not within the allowed path(s): (/var/www/b5821/data:.) in /var/www/b5821/data/www/wpsovet.ru/wp-content/plugins/nix-gravatar-cache/nf-gravatar-cache.php on line 164

      Warning: fopen(): open_basedir restriction in effect. File(/home/v/valent5k/wpsovet.ru/public_html/wp-content/uploads/gravatar/458c441fbb7710b73e0eccd1e3400841-s50.jpg) is not within the allowed path(s): (/var/www/b5821/data:.) in /var/www/b5821/data/www/wpsovet.ru/wp-content/plugins/nix-gravatar-cache/nf-gravatar-cache.php on line 206

      Warning: fopen(/home/v/valent5k/wpsovet.ru/public_html/wp-content/uploads/gravatar/458c441fbb7710b73e0eccd1e3400841-s50.jpg): failed to open stream: Operation not permitted in /var/www/b5821/data/www/wpsovet.ru/wp-content/plugins/nix-gravatar-cache/nf-gravatar-cache.php on line 206

      Warning: fwrite() expects parameter 1 to be resource, boolean given in /var/www/b5821/data/www/wpsovet.ru/wp-content/plugins/nix-gravatar-cache/nf-gravatar-cache.php on line 208

      Warning: fclose() expects parameter 1 to be resource, boolean given in /var/www/b5821/data/www/wpsovet.ru/wp-content/plugins/nix-gravatar-cache/nf-gravatar-cache.php on line 209
      Лифанов Валентин ()
      Ответить

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


  3. Warning: is_file(): open_basedir restriction in effect. File(/home/v/valent5k/wpsovet.ru/public_html/wp-content/uploads/gravatar/1c27f6d204e7ddb0422addb411f16303-s50.jpg) is not within the allowed path(s): (/var/www/b5821/data:.) in /var/www/b5821/data/www/wpsovet.ru/wp-content/plugins/nix-gravatar-cache/nf-gravatar-cache.php on line 164

    Warning: fopen(): open_basedir restriction in effect. File(/home/v/valent5k/wpsovet.ru/public_html/wp-content/uploads/gravatar/1c27f6d204e7ddb0422addb411f16303-s50.jpg) is not within the allowed path(s): (/var/www/b5821/data:.) in /var/www/b5821/data/www/wpsovet.ru/wp-content/plugins/nix-gravatar-cache/nf-gravatar-cache.php on line 206

    Warning: fopen(/home/v/valent5k/wpsovet.ru/public_html/wp-content/uploads/gravatar/1c27f6d204e7ddb0422addb411f16303-s50.jpg): failed to open stream: Operation not permitted in /var/www/b5821/data/www/wpsovet.ru/wp-content/plugins/nix-gravatar-cache/nf-gravatar-cache.php on line 206

    Warning: fwrite() expects parameter 1 to be resource, boolean given in /var/www/b5821/data/www/wpsovet.ru/wp-content/plugins/nix-gravatar-cache/nf-gravatar-cache.php on line 208

    Warning: fclose() expects parameter 1 to be resource, boolean given in /var/www/b5821/data/www/wpsovet.ru/wp-content/plugins/nix-gravatar-cache/nf-gravatar-cache.php on line 209
    Александр ()
    Ответить

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


    • Warning: is_file(): open_basedir restriction in effect. File(/home/v/valent5k/wpsovet.ru/public_html/wp-content/uploads/gravatar/458c441fbb7710b73e0eccd1e3400841-s50.jpg) is not within the allowed path(s): (/var/www/b5821/data:.) in /var/www/b5821/data/www/wpsovet.ru/wp-content/plugins/nix-gravatar-cache/nf-gravatar-cache.php on line 164

      Warning: fopen(): open_basedir restriction in effect. File(/home/v/valent5k/wpsovet.ru/public_html/wp-content/uploads/gravatar/458c441fbb7710b73e0eccd1e3400841-s50.jpg) is not within the allowed path(s): (/var/www/b5821/data:.) in /var/www/b5821/data/www/wpsovet.ru/wp-content/plugins/nix-gravatar-cache/nf-gravatar-cache.php on line 206

      Warning: fopen(/home/v/valent5k/wpsovet.ru/public_html/wp-content/uploads/gravatar/458c441fbb7710b73e0eccd1e3400841-s50.jpg): failed to open stream: Operation not permitted in /var/www/b5821/data/www/wpsovet.ru/wp-content/plugins/nix-gravatar-cache/nf-gravatar-cache.php on line 206

      Warning: fwrite() expects parameter 1 to be resource, boolean given in /var/www/b5821/data/www/wpsovet.ru/wp-content/plugins/nix-gravatar-cache/nf-gravatar-cache.php on line 208

      Warning: fclose() expects parameter 1 to be resource, boolean given in /var/www/b5821/data/www/wpsovet.ru/wp-content/plugins/nix-gravatar-cache/nf-gravatar-cache.php on line 209
      Лифанов Валентин ()
      Ответить

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


      • Warning: is_file(): open_basedir restriction in effect. File(/home/v/valent5k/wpsovet.ru/public_html/wp-content/uploads/gravatar/1c27f6d204e7ddb0422addb411f16303-s50.jpg) is not within the allowed path(s): (/var/www/b5821/data:.) in /var/www/b5821/data/www/wpsovet.ru/wp-content/plugins/nix-gravatar-cache/nf-gravatar-cache.php on line 164

        Warning: fopen(): open_basedir restriction in effect. File(/home/v/valent5k/wpsovet.ru/public_html/wp-content/uploads/gravatar/1c27f6d204e7ddb0422addb411f16303-s50.jpg) is not within the allowed path(s): (/var/www/b5821/data:.) in /var/www/b5821/data/www/wpsovet.ru/wp-content/plugins/nix-gravatar-cache/nf-gravatar-cache.php on line 206

        Warning: fopen(/home/v/valent5k/wpsovet.ru/public_html/wp-content/uploads/gravatar/1c27f6d204e7ddb0422addb411f16303-s50.jpg): failed to open stream: Operation not permitted in /var/www/b5821/data/www/wpsovet.ru/wp-content/plugins/nix-gravatar-cache/nf-gravatar-cache.php on line 206

        Warning: fwrite() expects parameter 1 to be resource, boolean given in /var/www/b5821/data/www/wpsovet.ru/wp-content/plugins/nix-gravatar-cache/nf-gravatar-cache.php on line 208

        Warning: fclose() expects parameter 1 to be resource, boolean given in /var/www/b5821/data/www/wpsovet.ru/wp-content/plugins/nix-gravatar-cache/nf-gravatar-cache.php on line 209
        Александр ()
        Ответить

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


        • Warning: is_file(): open_basedir restriction in effect. File(/home/v/valent5k/wpsovet.ru/public_html/wp-content/uploads/gravatar/458c441fbb7710b73e0eccd1e3400841-s50.jpg) is not within the allowed path(s): (/var/www/b5821/data:.) in /var/www/b5821/data/www/wpsovet.ru/wp-content/plugins/nix-gravatar-cache/nf-gravatar-cache.php on line 164

          Warning: fopen(): open_basedir restriction in effect. File(/home/v/valent5k/wpsovet.ru/public_html/wp-content/uploads/gravatar/458c441fbb7710b73e0eccd1e3400841-s50.jpg) is not within the allowed path(s): (/var/www/b5821/data:.) in /var/www/b5821/data/www/wpsovet.ru/wp-content/plugins/nix-gravatar-cache/nf-gravatar-cache.php on line 206

          Warning: fopen(/home/v/valent5k/wpsovet.ru/public_html/wp-content/uploads/gravatar/458c441fbb7710b73e0eccd1e3400841-s50.jpg): failed to open stream: Operation not permitted in /var/www/b5821/data/www/wpsovet.ru/wp-content/plugins/nix-gravatar-cache/nf-gravatar-cache.php on line 206

          Warning: fwrite() expects parameter 1 to be resource, boolean given in /var/www/b5821/data/www/wpsovet.ru/wp-content/plugins/nix-gravatar-cache/nf-gravatar-cache.php on line 208

          Warning: fclose() expects parameter 1 to be resource, boolean given in /var/www/b5821/data/www/wpsovet.ru/wp-content/plugins/nix-gravatar-cache/nf-gravatar-cache.php on line 209
          Лифанов Валентин ()
          Ответить

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