1

This is my blog as you can see FUll Details link in the post so i want to change that to button

The below is my code I want to add hover button like this

.readmorecontent a {
    color: #008800;
    float: center;
    
}
<span class="readmorecontent"><a href="http://urstrulyvijay.blogspot.in/2016/06/green-apple-is-best-fruit-to-eat-in-all.html">Full Details→</a></span>

This is my actual code in theme or template

<span class='readmorecontent'><a expr:href='data:post.url'>Full Details&#8594;</a></span>

.readmorecontent a {
    color: #008800;
    float: center;

}
7
  • Why not copying and edit the code from the link you have posted? Jun 30, 2016 at 7:01
  • 1
    iam not getting what you are asking Jun 30, 2016 at 7:02
  • There is no such value as float:center...
    – Paulie_D
    Jun 30, 2016 at 7:03
  • Questions seeking code help must include the shortest code necessary to reproduce it in the question itself. Although you have provided a link to a site or an example, if the link were to become invalid, your question would be of no value to other future SO users with the same problem.
    – Paulie_D
    Jun 30, 2016 at 7:04
  • i changed because when i executed in stackoverflow editor it is shifting to right thats y i changed for better understanding i hope you got it Jun 30, 2016 at 7:06

2 Answers 2

2

You can do it with transition:

.readmorecontent a {
   background-color: #ffffff;
    color: #4CAF50;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    border: 2px solid #4CAF50;
    text-decoration:none;
    padding: 10px 15px;
}

.readmorecontent a:hover {
    background-color: #4CAF50;
    color: white;
}
<span class="readmorecontent"><a href="http://urstrulyvijay.blogspot.in/2016/06/green-apple-is-best-fruit-to-eat-in-all.html">Full Details→</a></span>

1
  • this is what iam looking for Jun 30, 2016 at 7:07
1

You could copy the codes from the link you have posted in your question.. So you could do something like this:

.readmorecontent a {
    color: #008800;
    float: center; /* Error on this line */
    border: 2px solid #4CAF50;
    color: #008800;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
}
.readmorecontent a:hover {
    background-color: #4CAF50;
    color: white;
}
<span class="readmorecontent"><a href="http://urstrulyvijay.blogspot.in/2016/06/green-apple-is-best-fruit-to-eat-in-all.html">Full Details→</a></span>

Note: float: center; doesn't exists. Maybe you are looking for margin: 0px auto;?

I hope this will help you.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.