단추 서식 지정 (글꼴, 글꼴 (상대적) 크기, 맞춤, 내부 여백)

-1

단추를 작성했으며 형식 지정에 문제가 있습니다 (즉, 제곱, 텍스트를 인라인으로 작성하는 등)단추 서식 지정 (글꼴, 글꼴 (상대적) 크기, 맞춤, 내부 여백)

내 현재의 문제는 다음과 같습니다 텍스트는 - 아래쪽 라인은

이

내 애니메이션이 제대로 반응 큰 글꼴 크기 -upper 라인이 정상이 개 부품이지만 텍스트가 상단 라인과 낮은 내에 있어야하는데 화살표의 라인.

<head> 
<style> 
img { 
    } 
.button { 
    display: inline-block; 
    background-color: black; 
    border: none; 
    color: #dd1a23; 
    text-align: top; 
    font-size: 14px; 
    padding: 10px; 
    width: 200px; 
    transition: all 0.5s; 
    cursor: pointer; 
    margin: 20px; 
} 

.button span { 
    cursor: pointer; 
    display: inline-block; 
    position: relative; 
    left: 10px; 
    transition: 0.5s; 
} 

.button span:after { 
    position: absolute; 
    left: 10px; 
    opacity: 0; 
    top: 100px; 
    transition: 0.5s; 
} 

.button:hover span { 
    padding-left: 15px; 
    color: white; 
} 

.button:hover span:after { 
    opacity: 1; 
    right: 0; 
} 
</style> 
</head> 
<body> 

<h2>Animated Button</h2> 

<button class="button" style="vertical-align:top"> 
    <img src="images/back_arrow.png"> 
    <span>go back to<br> <style="font-size: 28px">Publication</span> 
</button>

출처

2016-09-21 Xav

당신은 어딘가에 화살표 이미지를 업로드 할 수 있으며, 여기에 공유? – jakob

http://i.imgur.com/cZBr1WR.png – Xav

몇 가지 코드가 도움이됩니다. 나는 믿는다.

button { 
 
    margin: 0 15px 15px; 
 
} 
 

 
.button { 
 
    border-radius: none; 
 
    border: none; 
 
    background-color: #000; 
 
    padding: 15px 25px; 
 
    cursor: pointer; 
 
} 
 

 
.button > *:not(:last-child) { 
 
    margin-right: 15px; 
 
} 
 

 
.button__icon { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    
 
    width: 20px; 
 
    height: 38px; 
 
} 
 

 
.button__icon_arrow { 
 
    background: url(http://i.imgur.com/8UYtsjR.png) center center no-repeat; 
 
    background-size: contain; 
 
} 
 

 
.button__content { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    
 
    transition: transform ease .3s; 
 
} 
 

 
.button__text { 
 
    display: block; 
 
    
 
    font-size: 14px; 
 
    color: #f00; 
 
    
 
    transition: color ease .3s; 
 
} 
 

 
.button__text_big { 
 
    font-size: 24px; 
 
} 
 

 
.button:hover .button__content { 
 
    transform: scale(1.05); 
 
} 
 

 
.button:hover .button__text { 
 
    color: white; 
 
}

<button class="button"> 
 
    <div class="button__icon button__icon_arrow"></div> 
 
    <span class="button__content"> 
 
    <span class="button__text">go back to</span> 
 
    <span class="button__text button__text_big">Publication</span> 
 
    </span> 
 
</button> 
 

 
<button class="button"> 
 
    <span class="button__content"> 
 
    <span class="button__text button__text_big">one line text</span> 
 
    </span> 
 
    <img class="button__icon" src="http://i.imgur.com/IE48jWJ.png"> 
 
</button> 
 

 
<button class="button"> 
 
    <span class="button__content"> 
 
    <span class="button__text">simple button</span> 
 
    <span class="button__text button__text_big">Without icon</span> 
 
    </span> 
 
</button> 
 

 
<button class="button"> 
 
    <span class="button__content"> 
 
    <span class="button__text">easy</span> 
 
    </span> 
 
</button> 
 

 
<button class="button"> 
 
    <div class="button__icon button__icon_arrow"></div> 
 
    <span class="button__content"> 
 
    <span class="button__text button__text_big">lol</span> 
 
    </span> 
 
    <img class="button__icon" src="http://i.imgur.com/IE48jWJ.png"> 
 
</button>

출처

2016-09-21 14:29:34 3rdthemagical

고맙습니다. 내 문제를 해결했습니다 – Xav

@Xav 좋아, 버튼 몇 가지 예를 추가했습니다. 이제 이미지를 사용하거나'div'를'background'와 함께 사용하여 아이콘을 표시 할 수 있습니다. – 3rdthemagical

이미지를 편집했는데 큰 오프셋이 있음을 유의하십시오. – 3rdthemagical

단추 서식 지정 (글꼴, 글꼴 (상대적) 크기, 맞춤, 내부 여백)

답변

관련 문제