带有框内轮廓和悬停的简单 CSS 按钮答案

【问题标题】：simple CSS button with outline inside box and hover带有框内轮廓和悬停的简单 CSS 按钮
【发布时间】：2017-11-02 00:30:58
【问题描述】：

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

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

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

悬停
背景：#1f1f1f

normal red button (background:#be0922;)

hover black button (background:#1f1f1f;)

【问题讨论】：

你能粘贴 HTML 和 CSS 吗？
可能是某些其他元素覆盖了您的按钮并导致问题 - 尝试发布一个复制您遇到的问题的工作示例，以便我们进行调查。

标签： css hyperlink hover box

【解决方案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/

【讨论】：

成功了！必须在它之前添加
，但这一定是因为我的页面中有一些东西。谢谢！

【解决方案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>

附言如果发布了我会使用你的标记

【讨论】：