Hi,
I made a custom button for my blogs Read More feature. The button itself works fine except when hovering there is an annoying problem. I wasn't able to attach the images in the post so screenshots from the links below.
First one is the button without hovering, works OK:
Button OK, not hovering
Second one is the button with hovering, see the problem:
Button problem, hovering
Here is the code I added. Copied from another thread:
.blog-post .blog-read-more {
text-align: center;
font-size: 15px;
color: #ffffff;
border: 1px solid;
width: 150px;
margin: auto;
padding: 8px;
border-radius: 0px;
background:#000000
}
.blog-post .blog-read-more :hover {
text-align: center;
font-size: 15px;
color: #000000;
border: 0px solid;
width: 150px;
margin: auto;
padding: 8px;
border-radius: 0px;
background:#ffffff
}
If I add "a" into the first line of the codes, the hovering works fine, but the button width is incorrect and it's aligned on the right.
"a" added in the code. Button on the left and too narrow
When hovering, it works fine but with the same problems as without hovering:
Hovering works "correctly"
Now the code looks like this:
.blog-post .blog-read-more a {
text-align: center;
font-size: 15px;
color: #ffffff;
border: 1px solid;
width: 150px;
margin: auto;
padding: 8px;
border-radius: 0px;
background:#000000
}
.blog-post .blog-read-more a:hover {
text-align: center;
font-size: 15px;
color: #000000;
border: 0px solid;
width: 150px;
margin: auto;
padding: 8px;
border-radius: 0px;
background:#ffffff
}
Any help would be appreciated.
Juha
