Оформление ссылки Читать дальше на CSS



Здравствуйте друзья и читатели. Обратила внимание, что нет у меня статьи об оформлении ссылочки <<Дальше>>. Во многих тестовых блогах оформила, а статью написать забыла. Ссылку использует каждый вебмастер, почему бы не оформить ее в своем, индивидуальном стиле.

Самый простой вариант оформления

Самый простой вариант оформления ссылки дальше с использованием CSS стилей

CSS стиль

.jump-link {
background: #f8f8ff; *// цвет фона
width:auto; *// ширина
text-align: center; *// расположение текста (центр)
font-size:20px; *// размер шрифта
padding:10px;
border:1px dotted #f00;*// цвет, размер и форма рамки
}
.jump-link a {
color: #0e5198;*// цвет текста
text-decoration: none;
}

Оформление с тенью текста и радиусом скругления углов

Оформление ссылки Дальше с тенью текста и скруглением углов

CSS стиль

.jump-link {
background: #0e5198;*// цвет фона
padding: 2px;
 border-radius: 16px 0px 80px 0px;*// радиус скругления углов
  -webkit-border-radius: 16px 0px 80px 0px;
border-bottom: 5px solid #03b4cc;*//размер, форма и цвет нижней границы
border-left:3px solid #03b4cc;*// размер, форма, цвет границы слева
padding-bottom: 5px;
width:auto;*//ширина
text-align: center;*// расположение текста (центр)
text-shadow:-1px 0 green,0 1px green,1px 0 green,0-1px green;*// тень текста
color:#f8f8ff;*// цвет текста
font-size:20px;*// размер шрифта
}
.jump-link a {
color: #fff;*// цвет текста
text-decoration: none;
}

Оформить можно без тени текста, разных рамок, только цветовой фон или фон градиента, будет красиво. Использовать изображение или создать кнопочку с текстом <<Далее>>, здесь уже кому как нравится. Ширина у меня задана автоматически, на всю страницу. У Вас есть возможность задать по своему усмотрению, например 200 или 300 px.

CSS для картинки

.jump-link {
background: url(адрес картинки или кнопки);
}

Стиль CSS вставить в шаблон выше строки ]]></b:skin> или дизайн добавить гаджет, сохранить внизу макета блога:
<style>код CSS</style>


TEXT.RU - 100.00%


Автор статьи ✎ Olga Protasova Выпуск ✹ 5/07/2017 Ярлыки ►


Открыть комментарии →

0 коммент. :

Отправить комментарий


 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *