更改按钮的大小

Question

我已尝试过所有东西，但我无法让按钮的宽度和高度变小。

.c--anim-btn span {
  color: white;
  text-decoration: none;
  text-align: center;
  display: block;
}
.c--anim-btn,
.c-anim-btn {
  transition: 0.3s;
}
.c--anim-btn {
  height: 64px;
  font: normal normal 700 1em/4em Arial, sans-serif;
  overflow: hidden;
  width: 200px;
  background-color: #3b5998;
}
.c-anim-btn {
  margin-top: 0em;
}
.c--anim-btn:hover .c-anim-btn {
  margin-top: -4em;
}

<!-- HINT: hover over button -->
<div class="c--anim-btn">
  <span class="c-anim-btn">
    First Text
  </span>
  <span>
    Second Text
  </span>
</div>

如果有人请告诉我一个解决方案，我将非常感激。

Answer 1

更改c-anim-btn类的CSS属性

.c--anim-btn span {
  color: white;
  text-decoration: none;
  text-align: center;
  display: block;
}
.c--anim-btn,
.c-anim-btn {
  transition: 0.3s;
}
.c--anim-btn {
  height: 24px; /* change height */
  font: normal normal 700 1em/1.6em Arial, sans-serif;
  overflow: hidden;
  width: 100px; /* change width */
  background-color: #3b5998;
}
.c-anim-btn {
  margin-top: 0em;
}
.c--anim-btn:hover .c-anim-btn {
  margin-top: -1.6em;
}

<!-- HINT: hover over button -->
<div class="c--anim-btn">
  <span class="c-anim-btn">
    First Text
  </span>
  <span>
    Second Text
  </span>
</div>

Answer 2

由于看到文字，您需要在更改高度后调整行高和页边距。评论onn css请看看.c - anim-btn和.c - anim-btn：hover

＆＃13;

＆＃13;

.c--anim-btn span {
  color: white;
  text-decoration: none;
  text-align: center;
  display: block;
}

.c--anim-btn, .c-anim-btn {
  transition: 0.3s;     
}

.c--anim-btn {
  height: 128px;
  font: normal normal 700 1em/8em Arial,sans-serif; /* 1em/8em means font-size/ line-height */
  overflow: hidden;
  width: 500px;
  background-color: #3b5998;
}

.c-anim-btn{
  margin-top: 0em;   
}

.c--anim-btn:hover .c-anim-btn{
  margin-top: -8em; /*Here you need to adjust after line-height change */
}

＆＃13;

<!-- HINT: hover over button -->
<div class="c--anim-btn">
  <span class="c-anim-btn">
First Text
  </span>
  <span>
Second Text
  </span>
</div>

＆＃13;

＆＃13;

＆＃13;