Question

我不明白为什么我不能轻易地让它工作。尝试为文本周围带有白线的链接创建一个简单的CSS按钮。当我将鼠标悬停在上面时，我希望红色框改为＃1f1f1f，但是当我将鼠标悬停在哪个部分时，我的问题就会延迟。

按钮文字
font-size：1.3em
字母间距：.3em

BOX
10px填充（文本和大纲之间），
1px #ffffff border，
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按钮，框内和悬停的轮廓

2 个答案: