ボタンの書式設定（フォント、フォント（相対）サイズ、配置、内側余白）

-1

ボタンを作成しましたが、書式設定に問題があります（つまり、四角形作成、テキストをインラインで作成するなど）ボタンの書式設定（フォント、フォント（相対）サイズ、配置、内側余白）

私の現在の問題は、以下のとおりです。テキストは - 低級ラインが

が

私のアニメーションが正しく反応してより大きなフォントサイズである -upperラインが正常である2部ですが、テキストは一番上の行と下の範囲内であると考えられます矢印の線。

<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 [OK]を、私はいくつかのボタンの例を追加しました。これで画像や 'div'と' background'を使ってアイコンを表示することができます。 – 3rdthemagical

画像が編集されていることに注意してください。大きなオフセットがあります。 – 3rdthemagical

ボタンの書式設定（フォント、フォント（相対）サイズ、配置、内側余白）

答えて

関連する問題