Кнопка в стиле глификон с текстом внутри?

Question

Я здесь новый, и я немного борюсь с самой легкой, простой проблемой.

Я хочу использовать глификон-стрелку справа, как кнопку, с текстом «проверить» с центром внутри него, есть ли простой способ сделать это? У меня есть эта код строка атм:

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

С этим я получаю зеленую стрелку, указывающую вправо, с текстом центром под ним. так как мне удается помещать его внутрь стрелки?

Спасибо!

Answer 1

Вы можете установить кнопку, чтобы использовать position:relative, которая будет вызывать все элементы внутри него, чтобы быть расположены по отношению к нему и просто использовать position:absolute от фактического <span>, содержащего текст и настроить top и left свойства, чтобы получить его в правильное положение:

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

Вы можете see an example of this here и выход показано ниже: