html,body { height:80%; background:#C1EBFF; } body { text-align:center; } body:before { content:''; height:100%; display:inline-block; vertical-align:middle; } button { background:#1AAB8A; color:#fff; border:none; position:relative; height:60px; font-size:1.6em; padding:0 2em; cursor:pointer; transition:800ms ease all; outline:none; } button:hover { background:#fff; color:#1AAB8A; } button:before,button:after { content:''; position:absolute; top:0; right:0; height:2px; width:0; background:#1AAB8A; transition:400ms ease all; } button:after { right:inherit; top:inherit; left:0; bottom:0; } button:hover:before,button:hover:after { width:100%; transition:800ms ease all; }
更新时间:2019-08-21 09:36:25