html - 如何使用 css 修改链接文本(html 链接)属性

Question

我一直在尝试使用本网站的 CSS 来模仿样式为按钮的链接- http://simpleblend.net/ (了解更多按钮)到目前为止，我已经这样做了，但是当我尝试调整大小或重新定位时，整个 div 会随着链接文本受到影响。

P.S- Extreme 新手请在评论中继续轻松

我的代码

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

您可以使用 em 设置距 top 和 padding 的偏移量。 em 是指元素当前字体大小的单位。因此，如果您更改字体大小，元素的位置和大小也会发生变化。请改用百分比 (%) 或像素 (px) 值，或者根本不要将元素定位为 absolute。

当您更改字体大小时，元素的大小也会受到影响，因为元素没有明确的宽度或高度，因此它适合其内容。要为 a 标签指定大小，您必须使用 display: block 将其设为 block 元素。

我更改了您的示例，让按钮的行为与您提到的网站上的按钮相同。我的示例不使用任何 Javascript。动画也可以使用一些 JS 框架(如 jQuery)来完成。

.learn {
  width: 200px;
  height: 60px;
  font-family: 'Open Sans',sans-serif;
  background-color: transparent;
  border:2px solid #fff;
  position: relative;
  text-align: center;
  font-size: 18pt;
  line-height:60px;
  overflow: hidden;
}
.learn a {
  color: white;
  display: block;
  transition: all 0.2s ease-in-out;
}
.learn:hover {
  background-color: white;
}
.learn:hover a {
  color: black;
  margin-left: -20px;
}
.learn span {
  background:url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAQCAYAAADESFVDAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAElJREFUeNqMj0EKADEIAx3//+f0siyF1iaCIDLEsapKX4/V26wEGsG+7JRAB9gPXyXQD+LeT5JiCAfhknDncE44cdx3THJLgAEAR9cJHGy5GicAAAAASUVORK5CYII=) center center;
  display: block;
  width: 9px;
  height: 16px;
  position: absolute;
  top: 22px;
  left: 110%;
  transition: all 0.2s ease-in-out;
}
.learn:hover span{
  left: 80%;
}
body {
  background-color: black;
}

<div class="learn">
  <a>Learn More</a>
  <span></span>
</div>