如何将按钮文字带到按钮底部？

Question

起初，我非常抱歉，我的英语太差了。我不是CSS专家，尤其是我正在尝试将按钮文本移动到按钮底部，如下所示：

但是它是这样的：

代码：

 	a{
		width: 150px;
		display: inline-block;
		text-align: center;
		padding: 25px 0;
		position: relative;
		overflow: hidden;
	}
	a span{
		transition: .5s;
	}
	a span:nth-child(1){
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		background-color: red;
		color: #fff;
		height: 50%;
		padding-top: 15px;
		overflow: hidden;
	}
	a span:nth-child(1) span{
		position: absolute;
		bottom: 0;
		left: 0;
		overflow: hidden;
	}
	a:hover span:nth-child(1){
		top: -100%;
	}
	a span:nth-child(2){
		position: absolute;
		height: 100%;
		overflow: hidden;
		top: 0;
		left: 0;
		width: 100%;
		background: black;
		z-index: -1;
	}
	a span:nth-child(3){
		position: absolute;
		overflow: hidden;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: blue;
		color: #fff;
		height: 50%;
	  line-height: 0;
		display: none;
	}
	a:hover span:nth-child(3){
		bottom: -100%;
	}

    <a href="#">
	    <span>Facebook</span>
	    <span>Click Me</span>
	    <span>Facebook</span>
    </a>

Answer 1

将padding-top:添加到要向下移动的文本元素。我建议像这样设置按钮：

<button class="my-btn">Facebook</button>

.my-btn { 
   padding-top: 9px; 
}