如何向链接添加鼠标悬停按钮

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;

}

2 个解决方案

#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;?

注意:浮动:中心;不存在。也许你想要的是:0px auto;?

I hope this will help you.

我希望这对你有帮助。

#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