Как изменить свойства ссылки (html link) с помощью css

Question

Я пытался подражать ссылке, созданной в виде кнопки с помощью css этого сайта. http://simpleblend.net/ (кнопка «Узнать больше»). Пока я сделал это, но на hover, когда я пытаюсь изменить размер или изменить позицию, на которую влияет весь div, а также текст ссылки.

P.S- Экстремальный новичку пожалуйста идти легко в комментариях

Мой код

CSS 
.learn 
{ 
font-family: 'Open Sans',sans-serif; 
background-color: transparent; 
border:2px solid #fff; 
color: white; 
padding:.8em; 
position: absolute; 
left: 43.6%; 
top:24em; 
font-size: 18pt; 
} 

.learn:hover 
{ 
background-color: white; 
color: black; 
font-size: 5pt; 
} 

HTML 
<a class="learn">Learn More</a> 

Answer 1

Вы можете установить смещение от top и padding использованием em. em - это единица, которая ссылается на текущий размер шрифта элемента. Поэтому, если вы измените размер шрифта, положение и размер элемента также будут изменены. Используйте процент (%) или пиксель (px) вместо этого или не размещайте элемент как absolute.

Размер элемента также влияет на размер шрифта, поскольку элемент не имеет явной ширины или высоты, поэтому он соответствует его содержимому. Чтобы дать тег a размер, вы должны сделать его элементом block, используя display: block.

Я изменил ваш пример, чтобы кнопка выглядела так же, как на упомянутом вами веб-сайте. В моем примере не используется Javascript. Анимация также может быть выполнена с использованием некоторой JS-структуры, такой как jQuery.

.learn { 
 
    width: 200px; 
 
    height: 60px; 
 
    font-family: 'Open Sans',sans-serif; 
 
    background-color: transparent; 
 
    border:2px solid #fff; 
 
    position: relative; 
 
    text-align: center; 
 
    font-size: 18pt; 
 
    line-height:60px; 
 
    overflow: hidden; 
 
} 
 
.learn a { 
 
    color: white; 
 
    display: block; 
 
    transition: all 0.2s ease-in-out; 
 
} 
 
.learn:hover { 
 
    background-color: white; 
 
} 
 
.learn:hover a { 
 
    color: black; 
 
    margin-left: -20px; 
 
} 
 
.learn span { 
 
    background:url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAQCAYAAADESFVDAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAElJREFUeNqMj0EKADEIAx3//+f0siyF1iaCIDLEsapKX4/V26wEGsG+7JRAB9gPXyXQD+LeT5JiCAfhknDncE44cdx3THJLgAEAR9cJHGy5GicAAAAASUVORK5CYII=) center center; 
 
    display: block; 
 
    width: 9px; 
 
    height: 16px; 
 
    position: absolute; 
 
    top: 22px; 
 
    left: 110%; 
 
    transition: all 0.2s ease-in-out; 
 
} 
 
.learn:hover span{ 
 
    left: 80%; 
 
} 
 
body { 
 
    background-color: black; 
 
}

<div class="learn"> 
 
    <a>Learn More</a> 
 
    <span></span> 
 
</div>

Answer 2

Установите height и width к элементу, display: table-cell для вертикального выравнивания. Теперь вы можете изменить font-size на зависание, и размер кнопки останется неизменным.

body { 
 
    background-color: #33b; 
 
} 
 
.learn { 
 
    font-family: 'Open Sans',sans-serif; 
 
    border:2px solid #fff; 
 
    color: #fff; 
 
    display: table-cell; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    width: 200px; 
 
    height: 40px; 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
    font-size: 14px; 
 
} 
 
.learn:hover { 
 
    background-color: white; 
 
    color: black; 
 
    font-size: 18px; 
 
}

<a href="#" class="learn">Learn more</a>