格式化按鈕（字體，字體（相對）大小，對齊方式，內邊距）

-1

我已經構建了一個按鈕，並且在格式化方面存在問題（即平方，使文本在線等）格式化按鈕（字體，字體（相對）大小，對齊方式，內邊距）

我的當前的問題是：文本是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好吧，我添加了一些按鈕的例子。現在，您可以使用圖像或''背景''div來顯示圖標。 – 3rdthemagical

請注意，我編輯了你的圖片，它有很大的頂部偏移量。 – 3rdthemagical

格式化按鈕（字體，字體（相對）大小，對齊方式，內邊距）

回答

相關問題