Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • March 26, 2015 at 8:54 am #418359
    bakbek

    Hi, I would like to change the read more link into a button – http://screencast.com/t/hIgkjQ0tjjl – how can I do that?

    Thanks.

    March 26, 2015 at 8:54 am #418360
    bakbek
    This reply has been marked as private.
    March 26, 2015 at 11:14 am #418431
    Günter

    Hi!

    Thank you for coming back.

    You can use a code like below and adjust the values as needed.

    If you want to limit it to this page:

    
.page-id-15 .read-more-link a {
    background: none repeat scroll 0 0 red !important;
    border-radius: 3px !important;
    padding: 5px 10px !important;
}

    Or for all pages:

    
.page .read-more-link a {
    background: none repeat scroll 0 0 red !important;
    border-radius: 3px !important;
    padding: 5px 10px !important;
}

    Come back if you need more assistance in styling.

    Best regards,
    Günter

    March 26, 2015 at 10:37 pm #418875
    bakbek

    Great. How can I make the color of the button – #37a8e0 – and the text color white?

    March 27, 2015 at 1:29 am #418974
    Yigit

    Hi!

    Please add following code to Quick CSS 

    .page .read-more-link a { background-color: #37a8e0!important; color: white!important; }

    Best regards,
    Yigit

    March 28, 2015 at 8:10 pm #419896
    bakbek

    Thanks. I combined the two and it looks good now.

    How can I make the Read More text bigger and how can I remove the underline when the curser is hovering over the button?

    March 30, 2015 at 8:17 am #420249
    Rikard

    Hey!

    Please try the following:

    .page .read-more-link a { 
font-size:18px !important;
}

.page .read-more-link a:hover { 
text-decoration:none !important;
}

    Best regards,
    Rikard

    March 30, 2015 at 8:34 am #420256
    bakbek

    Great, thanks :)

    How can I make the read more button to be center aligned?

    March 30, 2015 at 2:48 pm #420459
    Yigit

    Hi!

    Please add following code to Quick CSS as well

    .read-more-link {
  text-align: center;
}

    Cheers!
    Yigit

    March 30, 2015 at 2:54 pm #420469
    bakbek

    Thanks.

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘How to change the Read More link to a button?’ is closed to new replies.