Kiedy standardowo wrzucasz moduł „blog” i definiujesz jakie wpisy mają się tam pojawić – masz możliwość włączenia linku „czytaj dalej” pod zajawką każdego wpisu.
Problemem jest jednak to, że poza kolorem i atrybutami – standardowo nie ma opcji wyróżnienia tego napisu. A co jeśli chcemy zrobić zamiast zwykłego tekstu przycisk – dzięki czemu będzie zwracał większą uwagę?
Poniżej przykład jak za pomocą CSS zbudować przycisk, który będzie pojawiał się na dole wpisów na całą szerokość tekstu – przy układzie „siatka”
/******* przycisk "czytaj dalej" *******/
.et_pb_blog_grid .et_pb_post a.more-link {
background: #2ea3f2; /* kolor tła przycisku */
color: #fff; /* kolor tekstu na przycisku */
border: 2px solid #2ea3f2; /* kolor ramki przycisku */
display: block;
margin-top: 10px;
padding: 10px;
text-transform: uppercase; /* tekst będzie pisany dużymi literami */
letter-spacing: 1px; /* zwiększona odległość pomiędzy literami */
font-weight: bold; /* wariant fontu - pogrubiony */
text-align:center; /* pozycja tekstu na przycisku - wycentrowany /*
}
/******* przycisk "czytaj dalej" - po najechaniu kursorem *******/
.et_pb_blog_grid .et_pb_post a.more-link:hover {
background: #fff; /* kolor tła przycisku */
color: #2ea3f2; /* kolor tekstu na przycisku */
border: 2px solid #2ea3f2; /* kolor ramki przycisku */
}





0 komentarzy