Question

This是我的博客，因为你可以看到帖子中的FUll Details链接，所以我想将其更改为按钮

以下是我的代码我想添加像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

你可以通过过渡来实现：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

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

注意：float: center;不存在。也许您正在寻找margin: 0px auto;？

我希望这会对你有所帮助。

如何添加悬停按钮到链接

2 个答案: