Кнопка читать далее при наведении курсора меняет цвет. Вариант №2

Ох и намучилась же я с этими кнопочками.  Я уже делилась одной. Но как показала практика, данная кнопка «Читать далее» идет в конфликт с виджетом linkwithin, который стоит у многих моих читателей. Поэтому  я собрала манатки  нашла время и пошла в путь для поиска кнопок которые не будут  так сильно влиять на такой виджет. Вы не поверите я их нашла.

Но для начала нужно покопаться в шаблоне и найти это:

Под ним будет вот этот скрипт:

 
Читать далее

Меняем на этот:

Ищем  ]]>b:skin> и над ним вставляем этот код

Принажатии кнопка будет иметь зеленый цвет

/*------------ White + Green -----------*/.MBT-readmore{ background:#00000; text-align:right; cursor:pointer; color:#008000; 
margin:5px 0; 
float:right; 
border:2px solid #111; 
padding:5px; 
-moz-border-radius:6px; 
-webkit-border-radius:6px; 
font:bold 11px sans-serif; 
} 
.MBT-readmore:hover{ 
backgroundmargin:5px 0; float:right; border:2px solid #111; padding:5px; -moz-border-radius:6px; -webkit-border-radius:6px; font:bold 11px sans-serif; } .MBT-readmore:hover{ background:#008000; 
font:bold 11px sans-serif; 
color:#111; 
border:2px solid #111; 
} 
.MBT-readmore a { 
color:#111; 
text-decoration:none; 
}
font:bold 11px sans-serif; color:#111; border:2px solid #111; } .MBT-readmore a { color:#111; text-decoration:none; }.MBT-readmore a:hover { color:#111; text-decoration:none; }

до наведения

после наведения курсора

#008000 можно заменить на цвет, который вам  подходить под  дизайн

Это код оранжевой кнопочки

/*----------Orange One 1 ----------------*/.MBT-readmore{ background:#EB7F17; text-align:right; cursor:pointer; color:#fff; margin:5px 0; float:right; border:none; padding:5px; -moz-border-radius:6px; -webkit-border-radius:6px; font:bold 11px sans-serif; } .MBT-readmore:hover{ background:#FFB93C; } .MBT-readmore a { color:#fff; text-decoration:none; }.MBT-readmore a:hover { color:#fff; text-decoration:none; }

Розовая при наведении становиться красной

/*------------- Red + Dark Red------------*/.MBT-readmore{
background:#FE8080;
text-align:right;
cursor:pointer;
color:#FE8080;
margin:5px 0;
float:right;
border:2px solid #FE8080;
padding:5px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 11px sans-serif;
}
.MBT-readmore:hover{
background:#FF0000;
font:bold 12px sans-serif;
color:#FF0000;border:2px solid #FF0000;
}
.MBT-readmore a {
color:#FFF;
text-decoration:none;
}.MBT-readmore a:hover {
color:#FFf;
text-decoration:none;
}

до наведения

после наведения

#FE8080 –светло красный и #FF0000 - красный – можете заменить на любой другой цвет который подходит вам по дизайну

Вот такое путешествие я проделала. Теперь даже у моих читателей, которые остаются верными виджету  linkwithin, смогут сделать на блоге Кнопку далее, которая при наведении курсора поменяет цвет.

Идея взята от сюда http://www.mybloggertricks.com/

Всем па-па

Пожалуйста не забывайте нажать