Question

我一直试图使用这个网站的css模仿一个链接样式的链接 - http://simpleblend.net/（了解更多按钮）到目前为止我做了这个但是在我试图重新调整大小或重新定位时悬停整个div与链接文本一起受到影响。

P.S-极限新手请在评论中继续下去

我的代码

CSS
.learn
{
font-family: 'Open Sans',sans-serif;
background-color: transparent;
border:2px solid #fff;
color: white;
padding:.8em;
position: absolute;
left: 43.6%;
top:24em;
font-size: 18pt;
}

.learn:hover
{
background-color: white;
color: black; 
font-size: 5pt;
} 

HTML
<a class="learn">Learn More</a>

Answer 1

将height和width设置为元素display: table-cell以进行垂直对齐。现在，您可以在悬停时更改font-size，按钮的大小将保持不变。

body {
  background-color: #33b;
}
.learn {
    font-family: 'Open Sans',sans-serif;
    border:2px solid #fff;
    color: #fff;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 200px;
    height: 40px;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 14px;
}
.learn:hover {
    background-color: white;
    color: black;
    font-size: 18px;
}

<a href="#" class="learn">Learn more</a>

如何使用css修改链接文本（html链接）属性

1 个答案: