simple CSS button with outline inside box and hover

Question

I don't understand why I can't get this to work easily. Trying to make a simple CSS button for a link with a white line around the text. I want the red box to change to #1f1f1f when I hover over but I'm having issues with it delaying depending when I hover what part.

BUTTON TEXT
font-size: 1.3em
letter-spacing: .3em

BOX
10px padding (between text and outline),
1px #ffffff border,
5px padding (between outline and main box),
background: #be0922

hover
background: #1f1f1f

normal red button (background:#be0922;)

hover black button (background:#1f1f1f;)

It could be that some other element is overlaying your button and causing issues - try and post a working example replicating the issue you're having so we can investigate. — delinear, Nov 01 '17 at 16:10

score 0 · Accepted Answer · answered Nov 01 '17 at 16:14

I might try just making the <a> the full red button, with a <span> inside with a border.

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;
  }

See jsfiddle with this example working: http://jsfiddle.net/3gh9qen2/

That worked! Had to add
before it, but that must be because something in my page. Thanks! — J.P. Peppercorn, Nov 02 '17 at 17:26

G-Cyrillus · Answer 2 · 2017-11-01T16:30:58.983

there is a few ways with border, box-shadow and outline ....

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. I would have used your markup if it was posted

simple CSS button with outline inside box and hover

2 Answers2