как сделать ссылку в виде кнопки BLOGGER

Доброго времени суток, друзья. Используя CSS (Каскадная таблица стилей), любая ссылка может быть преобразована в кнопку - всего лишь 2 строчки простого кода. В зависимости от вашего выбора вы можете легко настроить цвет кнопки, границу, цвет шрифта и тени ссылок.
ссылка - кнопка

В html ссылка выглядит как <a href="www.shpargalochki.ru/">шпаргалки блогерши</a>, где тег <a> используется для включения ссылки внутри href = "", а текст ссылки помещается между тегом <a>.

Пример ссылки вы можете увидеть в конце поста.

Если хотите оформить все ссылки в виде анимированной кнопки, то в разделе Тема Blogger добавьте перед ]]> </ b: skin> следующий код


.btn{background:#c10707;border:1px solid #c10707 ;padding:3px;color:white !important;border-radius:6px;}.btn:hover{box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);background:#ff0000;text-decoration:none;}


Теперь при написании сообщения, в том месте где нужно выделить ссылку прописываем такой код в режиме HTML

<a class="btn" href="www.shpargalochki.ru/">шпаргалки блогерши</a>

Что можно изменить под ваш дизайн

background:#c10707;- цвет фона кнопки
border:1px solid #c10707 ; - ширина и цвет рамки
btn:hover{box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);- стили тени.

Таблица цветов здесь.

Если не часто применять кнопку - ссылку в блоге можно заключить код CSS в теги STYLE  и уже в редакторе сообщений, так же в режиме HTML, вставить полный код такого вида

<style>.btn{background:#3CB371;border:1px solid #BDB76B ;padding:3px;color:white !important;border-radius:6px;}.btn:hover{box-shadow: 0 8px 16px 0 rgba(174, 212, 194, 1), 0 6px 20px 0 rgba(174, 212, 194, 1);background:#556B2F;text-decoration:none;}</style>
<a class="btn" href="https://draft.blogger.com/www.shpargalochki.ru/">шпаргалки блогерши</a>

<a class="btn" href="www.shpargalochki.ru/">шпаргалки блогерши</a>


Посмотрите, что в итоге получается

шпаргалки блогерши

Удачи всем и до встречи.


👇
Получайте новые сообщения с блога прямо на почту

Введите Ваш email


7 комментариев:

  1. Полезная запись, спасибо! )))

    ОтветитьУдалить
  2. Ответы
    1. Вика! Ты написала мне, что украла у тебя, ты меня прости у меня и не было ни какого умысла о воровстве и я всё удалила Извини. Просто взяла для себя, может когда и пригодится.

      Удалить
    2. Инна, я ведь когда со всем этим разбирательствами и зашла на твой блог, я ведь подумала, что ты та самая Инна. Просто блоги похожие. Это ты меня прости. У тебя всё ОК. спасибо тебе за отзыв и понимание моего отчаяния

      Удалить
  3. Спасибо, Викусь за понимание! А я вся испереживалась, ведь это так не приятно.Я ведь совсем недавно оформила свой блог и много не понимаю. Но теперь все поняла.

    ОтветитьУдалить
    Ответы
    1. Не переживай, всё нормально. я потом уже хотела просить чтобы ты удалила мой комментарий , но зашла и вижу что пост удалён. Всегда сколько веду блог помогаю всем, чем могу. А тут пыталась Иннушке объяснить, но ...эх...

      Удалить

Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML

Пользовательский поиск
Foto Saya
My Photo