0

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

Дизайн. Хипервръзка във вид на бутон в 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); - стил на сянката;

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

    Успех на всички ни!

    Няма коментари :

    Винаги се радвам на Вашето мнение


    Copyright © БЛОГ ЗА БЛОГОВЕ©2016-| Original style & code - magentawave.com | Всички права запазени |
    Използването на Blogzablogove.com означава, че сте съгласни с нашата Политика на конфиденциалност и защита