在悬停时强调<p>，但它不应该使用bootstrap

Question

我在按钮上附加了一个referal标签，以便将按钮链接到另一个页面。我认为它制作正常文本是标签p和h2在悬停时加下划线。我已经尝试将它们放在不同的div中，但它没有任何建议。提前致谢。这是我目前的代码：

http://imageshack.com/a/img923/3453/OAiDzL.jpg

Answer 1

有人说<a href="#"></a>内的按钮无效。而是用css创建一个类并设置它的样式。此方法不应干扰您的<p>和<h1>标记。

https://jsfiddle.net/10zbre2y/1/

<div class="col-md-7">
 <h2>Heading</h2>
  <p>text</p>
  <a href="#" class="btn" role="button">Hello World!</a>
</div>


.btn {
    -moz-border-radius: 28px;
    -webkit-border-radius: 28px;
    background-color: transparent;
    border: solid #2A3A3F 2px;
    border-radius: 28px;
    color: #2A3A3F;
    font-size: 20px;
    padding: 10px 45px 10px 45px;
    text-decoration: none;
}

.btn:hover {
    background: #2A3A3F;
    color: #fccf29;
    text-decoration: none;
}