Change size of button - html

Question

I have tried everything, but I cannot manage to make the button smaller in the width and height.
.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>
If someone please can tell me a solution, I would be very grateful.

Answer 1

Change the CSS property of c--anim-btn class
.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

you need to adjust line height and margin top after change height because of text seen. Comment out onn css please take a look .c--anim-btn and .c--anim-btn:hover
.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 */
}
<!-- HINT: hover over button -->
<div class="c--anim-btn">
<span class="c-anim-btn">
First Text
</span>
<span>
Second Text
</span>
</div>