格式化按钮（字体，字体（相对）大小，对齐方式，内边距）

-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

格式化按钮（字体，字体（相对）大小，对齐方式，内边距）

回答

相关问题