ボタンのホバー効果の下から上への色の変更

Question

このボタンのホバー効果を現在のトップダウンからダウントップに戻すにはどうすればよいですか？例えば、かなりの時間が遊ん

.btn-1 { 
 
    position: relative; 
 
    border-width: 2px; 
 
    border-color: #4285f4; 
 
    color: #4285f4; 
 
    background-color: transparent; 
 
} 
 

 

 
.slide-btn, .slide-btn::after { 
 
    -webkit-transition: all 0.3s; 
 
\t -moz-transition: all 0.3s; 
 
    -o-transition: all 0.3s; 
 
\t transition: all 0.3s; 
 
} 
 

 
.slide-btn::before, .slide-btn::after { 
 
    background: #4285f4; 
 
    content: ''; 
 
    position: absolute; 
 
    z-index: -1; 
 
} 
 

 
.btn-1::after { 
 
    height: 0; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
} 
 

 
.btn-1:hover:after { 
 
    height: 100%; 
 
}

<button class="btn-1 slide-btn">Button 1</button>

.btn-1 ::に変更すると、{height：100％; }と.btn-1 :: after（height：0; } ...これは私に下位の効果を与えるが、逆の色を与える。 bottomから.btn-1::after変更topで

Answer 1

.btn-1の一番下に変更し、トップを:: https://jsfiddle.net/rp042h6j/

.btn-1::after { 
    height: 0; 
    left: 0; 
    bottom: 0; 
    width: 100%; 
} 

後

Answer 2

：

.btn-1 { 
 
    position: relative; 
 
    border-width: 2px; 
 
    border-color: #4285f4; 
 
    color: #4285f4; 
 
    background-color: transparent; 
 
} 
 

 
.slide-btn, 
 
.slide-btn::after { 
 
    -webkit-transition: all 0.3s; 
 
    -moz-transition: all 0.3s; 
 
    -o-transition: all 0.3s; 
 
    transition: all 0.3s; 
 
} 
 

 
.slide-btn::before, 
 
.slide-btn::after { 
 
    background: #4285f4; 
 
    content: ''; 
 
    position: absolute; 
 
    z-index: -1; 
 
} 
 

 
.btn-1::after { 
 
    height: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    width: 100%; 
 
} 
 

 
.btn-1:hover:after { 
 
    height: 100%; 
 
}

<button class="btn-1 slide-btn">Button 1</button>