Given text is not properly appearing on a button

Question

My question is "how to center a span class on button?". See this, arrow-up is behaving in it's own way and not at the center of button. If the code works correctly, An equilateral trinagle will appear in the left of button following with the words Go back to top. And my code has errors which is limiting that to appear in the above mentioned manner. This is running example, https://codepen.io/vkdatta27/pen/XWdvMQL

.arrow-up {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #101010;
}

<button><span class="arrow-up"></span>Go back to top</button>

score 1 · Answer 1 · answered Oct 03 '20 at 17:36

There are different ways to do it, one way to do it is using position: absolute; and adjusting its position, see the code below.

button {
padding-left: 20px;
}
.arrow-up {
  position: absolute;
  left: 15px;
  top: 15px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent; 
  border-bottom: 5px solid #101010;
 }

<button><span class="arrow-up"></span>Go back to top</button> 
<!-- Arrow up isn't in center like other text -->

score 1 · Answer 2 · answered Oct 03 '20 at 17:40

Dont make it so complicated espaically with CSS if there is no reason to it. Simply remove the Span and isnert the unicode of the up-triangle ▲.

.arrow-up {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #101010;
}

<button>&#9650; Go back to top</button>

user1601324 · Answer 3 · 2020-10-03T17:42:39.850

0

Just make the span display:inline-block:

.arrow-up {
  width: 0;
  height: 0;
  display:inline-block;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #101010;
}

<button><span class="arrow-up"></span>Go back to top</button>

then if you want you can add margin or padding to adjust .

edited Oct 03 '20 at 17:42

answered Oct 03 '20 at 17:36

user1601324

263
1
9

score 0 · Answer 4 · answered Oct 03 '20 at 17:37

You can use flexbox to the button container to achieve that result (codepen).

CSS:

.arrow-up {
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent; 
  border-bottom: 5px solid #101010;
 }

.container {
  display: flex;
  align-items: center;
}

HTML:

<button class="container"><span class="arrow-up"></span>Go back to top</button> 
<!-- Arrow up isn't in center like other text -->

Alex Yepes · Answer 5 · 2020-10-03T18:27:14.797

0

There are different ways. This will be one of those ways:

.btn-container {
  display: flex;
}

.arrow-up {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #101010;
  margin-top: 5px;
}

 <button class="btn-container">
      <span class="arrow-up"></span
      ><span class="textOnBtn"> Go back to top</span>
</button>

edited Oct 03 '20 at 18:27

answered Oct 03 '20 at 17:41

Alex Yepes

702
4
15

cpt.oneeye · Accepted Answer · 2020-10-04T09:36:30.997

0

Another possible solution without absolute positioning. Three lines are added to the arrow-up:

.arrow-up {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #101010;

  /* new lines */
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
}

<button><span class="arrow-up"></span>Go back to top</button>

edited Oct 04 '20 at 09:36

answered Oct 03 '20 at 17:44

cpt.oneeye

492
6
20

Given text is not properly appearing on a button

6 Answers6