![]() | Дата: | Автор: | |
18.11.2015 | Konstantin |
Меняем простую ссылку на красивую кнопку. Заполняя сайт каким либо материалом, мы в тексте часто делаем ссылки на другие страницы сайта или сторонние сервисы что зачастую делает их незаметными. Предлагаю с помощью CSS стилей заменить текстовые ссылки на красивые кнопки, которые будут ярко выделяться из основного контента вашего проекта. 1. Для начала нам понадобится текстовая ссылка 2. Переходим к созданию стилей для нашей кнопки. .buttlink { В итоге получилась вот такая кнопка padding:6px 10px; /----------/Величина отступа внутри элемента/----------/ background: #b91919; /----------/Цвет фона/----------/ text-decoration: none; /----------/Отменяет подчеркивание текста/----------/ color:#FFFFFF; /----------/Цвет текста/----------/ border-radius: 8px; /-------------------/Скругленные углы/-------------------/ box-shadow: #000 0 .1em 3px; /----------/Тень/----------/ } .buttlink:hover { padding:8px 12px; /----------/Величина отступа внутри элемента/----------/ background: #ff0000; /----------/Цвет фона/----------/ text-decoration: none; /----------/Отменяет подчеркивание текста/----------/ font-weight:bold; /----------/Жирный шрифт/----------/ color:#FFFFFF; /----------/Цвет текста/----------/ box-shadow: #000 0 .3em 6px; /----------/Тень/----------/ } Меняя тот или иной параметр, вы сможете настроить кнопку под свой цвет и вкус, а так же удаляя или добавляя в нее новые элементы. Теперь нам нужно разместить созданную кнопку в нужном для нас месте. Собственно сам код кнопки прописываем туда, где бы вы хотели ее видеть, а вот для прописывания стилей существует несколько вариантов. Вот вроде бы и все, если что обращайтесь с вопросами на наш форум. |