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