CODEWITHSUNDEEP
htmlcss
Ryan Salmons
Ryan Salmons

Reputation: 1459

Add arrow selector to center of button

I am trying to add a white arrow through CSS to the bottom of link buttons. However, I am having trouble centering the arrow uniformly for all of the buttons..

JSFIDDLE

HTML:

<div class="help-buttons">
    <a href="#" class="help-button">User Information</a>
    <a href="#" class="help-button">Company Information</a>
    <a href="#" class="help-button">Driver Information</a>
</div>

CSS:

.help-buttons {
  margin: 75px auto;
  text-align: center;
}
.help-button {
  background: #1795db;
  color: #fff;
  padding: 15px 20px;
  font-family: 'Open sans';
  box-shadow: 3px 3px 0px 0px rgba(0,0,0,0.2);
  margin: 0 30px;
}
.help-button:after {
  content: "";
  position: absolute;
  margin-top: 25px;
  margin-left: -75px;
  width: 0;
  height: 0;
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-bottom: 13px solid #ffffff;
}

Upvotes: 4

Views: 2570

Answers (2)

Pevara
Pevara

Reputation: 14310

Is this what you are after? http://jsfiddle.net/6ysbwrx8/4/

The trick lies in setting your left position to 50% and the margin-left to negative halve the width of the arrow (to compensate for the 'overshoot'). Also note that I added a position: rekative; for the absolute positioning to work correctly.

Here is the full css:

.help-button {
    background: #1795db;
    color: #fff;
    padding: 15px 20px;
    font-family: 'Open sans';
    box-shadow: 3px 3px 0px 0px rgba(0,0,0,0.2);
    margin: 0 30px;
    position: relative;
    white-space: no-wrap;
}
.help-button:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -13px;
    margin-bottom: -3px;
    width: 0;
    height: 0;
    border-left: 13px solid transparent;
    border-right: 13px solid transparent;
    border-bottom: 13px solid #ffffff;
}

(I also added a white-space: no-wrap; to prevent your buttons from splitting into multiple lines)

Upvotes: 2

misterManSam
misterManSam

Reputation: 24692

  1. Make .help-button position: relative; so that the arrows are positioned relative to the button.

  2. The negative margin on :after should be the same size as the border.

  3. Adjust the bottom: -6px to get the size that you want.

Have a fiddle!

HTML

<div class="help-buttons">
        <a href="#" class="help-button">User Information</a>
        <a href="#" class="help-button">Company Information</a>
        <a href="#" class="help-button">Driver Information</a>
    </div>

CSS

.help-buttons {
    margin: 75px auto;
    text-align: center;
}
.help-button {
    background: #1795db;
    color: #fff;
    padding: 15px 20px;
    font-family: 'Open sans';
    box-shadow: 3px 3px 0px 0px rgba(0,0,0,0.2);
    margin: 0 30px;
    position: relative;
}
.help-button:after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    margin-left: -13px;
    width: 0;
    height: 0;
    border-left: 13px solid transparent;
    border-right: 13px solid transparent;
    border-bottom: 13px solid #ffffff;
}

Upvotes: 3

Related Questions