CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
DinnerIsBetterThanDessert
DinnerIsBetterThanDessert

Reputation: 13

Button styled as a glyphicon, with text inside?

I´m new here, and I have a bit of a struggle with a, most lightly, simple problem.

I want to use the glyphicon-arrow-right, as a button, with the text "to test" centered inside it, is there an easy way to do this? I have this code line atm:

<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
   <a class="btn btn-default" style="color:green" href="textview" id="totestarrow">
      <span style="font-size:10em;" class="glyphicon glyphicon-arrow-right">
      </span><br>Til testene
   </a>
</div>

With this I get a green arrow pointing right, with the text centered underneath it. so how do I manage to put it inside of the arrow?

Thanks!

Upvotes: 1

Views: 548

Answers (1)

Rion Williams
Rion Williams

Reputation: 76547

You can set your button to use position:relative, which will cause all of the elements within it to be positioned relative to it and simply use position:absolute on your actual <span> containing your text and adjust the top and left properties to get it in the proper position :

<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
   <a class="btn btn-default" style="color:green; position: relative;" href="textview" id="totestarrow">
      <span style="font-size:10em;" class="glyphicon glyphicon-arrow-right"></span>
      <span class='centered-text'>
        Til testene
     </span>
   </a>
</div>
<style>
.centered-text {
    /* This will cause your element to be positioned freely over it's container */
    position: absolute;
    /* This will bring the element roughly halfway down the existing element */ 
    top: 47%;  
    /* Colored white to stand out */
    color: white;
    /* The following styles will center the element in it's container */
    text-align: center;
    left: 0;
    width: 100%;
}
</style>

You can see an example of this here and the output demonstrated below :

enter image description here

Upvotes: 3

Related Questions