Варіанти оформлення кнопки «Читати далі» (read more)

27

Практично на всіх інтернет-ресурсах, будь-то простенький сайт, великоваговий новинний портал або особистий блог, використовується заповітна кнопка «Читати далі» (read more), найчастіше це головна сторінка з коротким анонсами записів, сторінки рубрик, архіви тегів або тимчасові архіви, там де більша частина тексту постів прихована і замінено на посилання «Читати далі».

Оформляють цю посилання, хто на що здатний, хтось обходиться стандартній текстової посиланням, багато навішують різні фонові картинки, ну а ми, давайте розглянемо декілька варіантів оформлення кнопки «Читати далі» (read more), з допомогою нових властивостей з обойми CSS3.

Варианты оформления кнопки readme

Дивитися Демо

В наборі використано 5 основних класів відповідних тій або іншій кольоровій схемі (pink, red, blue, yelow, green), з допомогою додавання певних класів, змінюються базові стилі за замовчуванням і при наведенні курсору на посилання «Читати далі».

 читати далі
читати далі
читати далі
читати далі
читати далі

читати далі
читати далі
читати далі
читати далі
читати далі

Наприклад, для того щоб отримати кнопку з заміною фонової заливки при наведенні, досить додати клас rectangle, все, кнопка буде змінювати колір залежно від обраного базового класу визначає основний колір тла кнопки.

 читати далі
читати далі
читати далі
читати далі
читати далі

читати далі
читати далі
читати далі
читати далі
читати далі

Нижче ви можете подивитися живий приклад, а також код CSS, для формування одного із стилів кнопки.

.rectangle{
position:relative;
display: inline-block;
margin:0em .5em;
padding:0.25 em 1.25 em;
background:#555;
color:#fff;
text-decoration:none;
overflow:hidden;
}
.rectangle:before{
position: absolute;
content: attr(data-text);
display: inline-block;
padding:0.25 em 1.25 em;
color:#fff;
text-decoration:none;
top:0em;
left:-100%;
-webkit-transition:all 0.25 s ease;
-moz-transition:all 0.25 s ease;
-mos-transition:all 0.25 s ease;
-o-transition:all 0.25 s ease;
transition:all 0.25 s ease;
border:none !important;
}
.rectangle:hover{
border:none !important;
background:#555;
color:#fff;
}
.rectangle:hover:before{
left: 0%;
border:none !important;
box-shadow: inset -5px -5px 10px -7px rgba(0,0,0,0.5), inset 5px 5px 10px -7px rgba(0,0,0,0.5);
color:#fff;
}
.rectangle:after{
border:none !important;
}

.rectangle{
position:relative;
display: inline-block;
margin:0em .5em;
padding:0.25 em 1.25 em;
background:#555;
color:#fff;
text-decoration:none;
overflow:hidden;
}
.rectangle:before{
position: absolute;
content: attr(data-text);
display: inline-block;
padding:0.25 em 1.25 em;
color:#fff;
text-decoration:none;
top:0em;
left:-100%;
-webkit-transition:all 0.25 s ease;
-moz-transition:all 0.25 s ease;
-mos-transition:all 0.25 s ease;
-o-transition:all 0.25 s ease;
transition:all 0.25 s ease;
border:none !important;
}
.rectangle:hover{
border:none !important;
background:#555;
color:#fff;
}
.rectangle:hover:before{
left: 0%;
border:none !important;
box-shadow: inset -5px -10px 5px -7px rgba(0,0,0,0.5), inset 5px 5px 10px -7px rgba(0,0,0,0.5);
color:#fff;
}
.rectangle:after{
border:none !important;
}

Набір правил збудований так, що вибравши певний клас, вподобаного вам варіанти оформлення, прописавши його до ссылке кнопки, ви отримаєте повністю видозмінену кнопку «Читати далі».

У тілі кнопки ви можете безпосередньо в CSS, прописати додаткові символи або піктограми, у прикладі використовуються шрифт-іконки у вигляді стрілок з пакету Font Awesome, який вам потрібно буде попередньо підключити до вашого проекту, для цього в розділі між тегами розмістіть наступне:


З допомогою псевдоелемент :after :before в css, визначаєте бажану прин-іконку, яка буде виводиться на кнопці, перед текстом або після.

/* Стрілки в колі ротація при наведенні */
.arrow-circle{
position:relative;
display: inline-block;
margin:0em .5em;
padding:0.25 em 2em 0.25 em 0.5 em ;
color:#555;
text-decoration:none;
overflow:hidden;
z-index:1;
-webkit-transition:all 0.25 s ease;
-moz-transition:all 0.25 s ease;
-mos-transition:all 0.25 s ease;
-o-transition:all 0.25 s ease;
transition:all 0.25 s ease;
border:0.0625 em solid #555;
}
.arrow-circle:hover{
background:none;
color:#555;
}
.arrow-circle:after{
position: absolute;
margin-top: 0.07 em;
right:0.28 em;
content: "\f0a9";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
font-size: 1.25 em;
-webkit-transition:all 0.5 s ease;
-moz-transition:all 0.5 s ease;
-mos-transition:all 0.5 s ease;
-o-transition:all 0.5 s ease;
transition:all 0.5 s ease;
-webkit-transform:rotateX(0deg);
-moz-transform:rotateX(0deg);
-mos-transform:rotateX(0deg);
-o-transform:rotateX(0deg);
transform:rotateX(0deg);
padding-left:5px;
background:none;
border-left:0.0625 em solid #555;
border-top:none;
border-right:none;
border-bottom:none;
}
.arrow-circle:hover:after{
-webkit-transform:rotateX(180deg);
-moz-transform:rotateX(180deg);
-mos-transform:rotateX(180deg);
-o-transform:rotateX(180deg);
transform:rotateX(180deg);
background:none;
border-top:none;
border-right:none;
border-bottom:none;
}

/* Стрілки в колі ротація при наведенні */.arrow-circle{
position:relative;
display: inline-block;
margin:0em .5em;
padding:0.25 em 2em 0.25 em 0.5 em ;
color:#555;
text-decoration:none;
overflow:hidden;
z-index:1;
-webkit-transition:all 0.25 s ease;
-moz-transition:all 0.25 s ease;
-mos-transition:all 0.25 s ease;
-o-transition:all 0.25 s ease;
transition:all 0.25 s ease;
border:0.0625 em solid #555;
}
.arrow-circle:hover{
background:none;
color:#555;
}
.arrow-circle:after{
position: absolute;
margin-top: 0.07 em;
right:0.28 em;
content: “\f0a9”;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
font-size: 1.25 em;
-webkit-transition:all 0.5 s ease;
-moz-transition:all 0.5 s ease;
-mos-transition:all 0.5 s ease;
-o-transition:all 0.5 s ease;
transition:all 0.5 s ease;
-webkit-transform:rotateX(0deg);
-moz-transform:rotateX(0deg);
-mos-transform:rotateX(0deg);
-o-transform:rotateX(0deg);
transform:rotateX(0deg);
padding-left:5px;
background:none;
border-left:0.0625 em solid #555;
border-top:none;
border-right:none;
border-bottom:none;
}
.arrow-circle:hover:after{
-webkit-transform:rotateX(180deg);
-moz-transform:rotateX(180deg);
-mos-transform:rotateX(180deg);
-o-transform:rotateX(180deg);
transform:rotateX(180deg);
background:none;
border-top:none;
border-right:none;
border-bottom:none;
}

У статті я показав лише два простих прикладу, всього ж в пакеті, 10 варіантів оформлення посилання «Читати далі» і це далеко не межа, завантаживши исходники, ви зможете поекспериментувати з параметрами, і закрити інші, не менш, а може бути і більш вражаючі варіації.
Автор набору український хлопець mmetrodw, забабахав цей продукт на буржуінскій лад(це ж європа, мати їх). Довелося адаптувати і виправляти помилки видаються Chrome. Сподіваюся він не буде на мене в образі)))).

Вихідні матеріали залиті на Яндекс.Диск, забирайте сміливо, вірусів немає.

ДемоСкачать

З Повагою, Андрій .

Буду всім вдячний, якщо підтримайте проект — додавши блог виключення AdBlock та поділіться посиланням на запис в своїх соціальних мережах: