Question

我已经构建了一个按钮，并且在格式化方面遇到了问题（例如，平方，使文本在线，等等）

我目前的问题是：该文本分为两部分上线是正常的 - 较低的行是较大的字体大小

我的动画反应正确，但文本应该在箭头的顶行和下面。

<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>

Answer 1

有一些代码可以帮助您。我相信。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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

1 个答案: