Дизайн. Хипервръзка във вид на бутон в BLOGGER

Здравейте всички, приятели, гости и редовни читатели. С помощта на CSS (Cascading Style Sheets), всяка хипервръзка във вашия блог може да се превърне в бутон. Само с няколко реда простичък код. В зависимост от желанието и необходимостта ви, можете лесно да го измените, като персонализирате цвета, границата, цвета на шрифта и сянката на бутона – хипервръзка.

В HTML редактора хипервръзката може да изглежда примерно така:
Блог за блогове , където:

➤<a> тагът се използва за включване на хипервръзката вътре в href = " "; 

➤текстът на хипервръзката се поставя между маркерите <a>;

Например:

<style>.btn{background:#2288bb;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:#96DCFE;text-decoration:none;}</style>
<a class="btn" href="https://www.blogzablogove.com/">Блог за блогове</a>

Ще изглежда така:



Блог за блогове


Как да го направите? Имате две възможности при оформянето на вашите хипервръзки:

Всички хипервръзки да са във вид на бутони

Ако искате винаги и всичките ви хипервръзки да са оформени под формата на бутони, направете следното:
От админ панела идете в Тема намерете познатия ни ред ]]> </ 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="адрес на хипервръзката">текст</a>

Само една хипервръзка да е оформена като бутон

Ако ще използвате рядко бутон-хипервръзка в блога си, то затворете кода ѝ с таговете <style> и </style> и също в режим HTML го поставете на нужното място. Той ще изглежда така:

<style>.btn{background:#2288bb;border:1px solid #CBEEFE ;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:#96DCFE;text-decoration:none;}</style>
<a class="btn" href="https://www.blogzablogove.com/">Блог за блогове</a>

Какво можете да промените в кода

За да подхожда на дизайна ви може да промените:

➤background:#2288bb; - е цвета на фона на бутона;

➤border:1px solid #CBEEFE; - дебелина и цвят на рамката;

➤.btn:hover{box-shadow: 0 8px 16px 0 rgba(174, 212, 194, 1), 0 6px 20px 0 rgba(174, 212, 194, 1); - стил на сянката;

Таблицата на цветовете е тук. А за редакцията на кода използвайте този инструмент. Така какво и как променяте в него ще е пред очите ви.

Успех!

Здраве за всички вас! Не забравяйте да правите добро на други хора!

Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на: