Style the Read More Tag as a Button

  • Unknown's avatar
    uskbay · Member ·

    Hi all,
    I use Twenty-Seventeen as my Theme and I want to style my Read More Tag. By googling and a lot of trial and error, I found some solutions to style the output of Read more. The problem is, as soon as I want to style it as a buttom by using
    border: 1px solid #0f3647 or padding: 10px it shows the beginning of another box about one line above. I think that is because of the screen-reader-text line in HTML. Does anyone have a hint for me what to change?

    My CSS: 

    
a.more-link {
		font-weight: bold;
		font-size: 1.3em;
		color : #fff;
		font-variant: small-caps;
		box-shadow: none!important;
		background-color: #21759B;
		border-radius: 3px;;
}
a.more-link:hover {
	background-color : #008800;
}

    HTML: 

    
<a class="more-link" href="https:...">
::before
<span class="screen-reader-text">„Page Title“</span> 
</span>
read more
</a>
::after

    Best Ben

  • staff-mckluskey · Staff ·

    Hi Ben,

    I’m afraid that your site is not hosted with WordPress.com. It is a site using the open-source WordPress software (from WordPress.org) but hosted elsewhere.

    Because WordPress.com and WordPress.org are two entirely separate entities, we cannot access files or data for sites that are hosted elsewhere, so WordPress.com staff can only assist with sites that are hosted on our servers. You can read more about the differences between WordPress.org software and WordPress.com here:

    WordPress.com vs. WordPress.org

    You can look for help at the community forums here: https://wordpress.org/support/forums/

    http://wordpress.org/support/ is also a great resource for sites using the open-source WordPress.org software.

  • The topic ‘Style the Read More Tag as a Button’ is closed to new replies.