Linear gradient border issue

Question

I am trying to create a linear gradient border by overlaying a div and button. The problem is the div is not perfectly centred under the button and I don't know how to fix it (I want it perfectly overlayed before I start messing with its size). This results in a line appearing above the button. This happens regardless of if I hardcode the divs height or not .

Added bonus, if I don't hardcode the divs height it varies, so far I have seen 50.5px, 50.5625px, 50.7px but the width is always 150px.

CSS

.navbar li {
  display: flex;
  border: 1px solid black;
  height: 120px;
  font-size: 30px;
  padding: 12px;
  justify-items: center;
  align-items: center;
}

.navbar button {
  background: white;
  border: 0;
  color: #222222;
  font-size: 14pt;
  width: 150px;
  height: 50px;
  transition-duration: 0.4s;
}

.buttonBorder {
  height: 50px;
  background: var(--amethyst);
  background: linear-gradient(
    90deg,
    rgba(148, 88, 199, 1) 0%,
    rgba(92, 62, 183, 1) 100%
  );
}

HTML

<li className={styles.events}>
  <div className={styles.buttonBorder}>
      <button onClick={() => { navigate("/event-calendar")}}>
          Event Calendar
      </button>
  </div>
</li>

score 1 · Accepted Answer · answered Sep 26 '20 at 08:23

Reduce the height and width of the button to be 2px less (1px on each side), then center it using flexbox on .buttonBorder:

li {
  display: flex;
  border: 1px solid black;
  height: 120px;
  font-size: 30px;
  padding: 12px;
  justify-content: center;
  align-items: center;
}

button {
  background: white;
  border: 0;
  color: #222222;
  font-size: 14pt;
  width: 148px;
  height: 48px;
  transition-duration: 0.4s;
}

.buttonBorder {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  width: 150px;
  background: linear-gradient(90deg, rgba(148, 88, 199, 1) 0%, rgba(92, 62, 183, 1) 100%);
}

<li>
  <div class="buttonBorder">
    <button>Event Calendar</button>
  </div>
</li>

Linear gradient border issue

1 Answers1