如何将悬停按钮添加到 link

Question

This 是我的博客，您可以在 post 中看到完整的详细信息 link，所以我想将其更改为按钮

下面是我的代码，我想添加悬停按钮，例如 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>

这是我在主题或模板中的实际代码

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

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

}

Answer 1

你可以通过转换来做到这一点：

.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>

Answer 2

您可以复制您在问题中发布的 link 中的代码。所以您可以这样做：

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

希望对您有所帮助。

如何将悬停按钮添加到 link

How can i add hover button to the link

html

css

jquery

button

hover