简单的 CSS 按钮，框内有轮廓和悬停

Question

我不明白为什么我不能让它轻松工作。尝试为 link 制作一个简单的 CSS 按钮，文本周围有一条白线。当我将鼠标悬停在上面时，我希望红色框更改为#1f1f1f，但是我遇到了延迟问题，具体取决于我悬停在哪个部分上。

按钮文字
字体大小：1.3em
字母间距：.3em

盒子
10px 填充（文本和轮廓之间），
1px #ffffff 边框，
5px 填充（在轮廓和主框之间），
背景：#be0922

悬停
背景：#1f1f1f

normal red button (background:#be0922;)

hover black button (background:#1f1f1f;)

Answer 1

我可能会尝试将 <a> 设为完整的红色按钮，内部带有边框的 <span>。

HTML:

<a href="#" class="fancy-button">
  <span>Read More about our services</span>
</a>

CSS:

.fancy-button {
  background: #be0922;
  font-size: 1.3em;
  letter-spacing: .3em;
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
  display: inline-block;
  text-decoration: none;
}

  .fancy-button span {
    color: white;
    text-transform: uppercase;
    border: 1px solid white;
    display: inline-block;
    padding: 5px 10px;
    box-sizing: border-box;
  }

  .fancy-button:hover {
    background: #1f1f1f;
  }

请参阅 jsfiddle 与此示例一起工作： http://jsfiddle.net/3gh9qen2/

Answer 2

边框、框阴影和轮廓有几种方法....

button {
  line-height: 1.3;
  padding: 15px;
  background: red;
  border: none;
  color: white;
  vertical-align: middle;
  margin: 5px;
  box-sizing: border-box;
}

.outline {
  outline: solid 1px;
  outline-offset: -5px;
}

.outlineborder {
  outline: 5px solid red;
  border: 1px solid white;
}

.shadow {
  box-shadow: 0 0 0 5px red, inset 0 0 0 1px white;
}

.border {
  box-sizing: border-box;
  border: 5px solid transparent;
  box-shadow: inset 0 0 0 1px white;
}

.shadowborder {
  box-shadow: 0 0 0 5px red;
  border: 1px solid white;
  margin: 5px;
}

button:hover {
  background: #1f1f1f
}

.outlineborder:hover {
  outline-color: #1f1f1f
}

.shadow:hover {
  box-shadow: 0 0 0 5px #1f1f1f, inset 0 0 0 1px white;
}

.shadowborder:hover {
  box-shadow: 0 0 0 5px #1f1f1f;
}

<button class=none>101 simple reset to start from</button>
<button class=outline>simple reset & outline offset</button>
<button class=outlineborder>simple reset & outline + border</button>
<button class=shadow>simple reset & shadow</button>
<button class=shadowborder>simple reset & border shadow </button>
<button class=border>simple reset & shadow border</button>

p.s。 如果发布了您的标记，我会使用它

简单的 CSS 按钮，框内有轮廓和悬停

simple CSS button with outline inside box and hover

css

hyperlink

hover

box