<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>애니메이션 버튼</title>
<link rel="shortcut icon" href="imgs/favicon.ico">
<style>
* {margin:0; padding:0; box-sizing:border-box;}
span {display:block;}
a {display:block; text-decoration:none;}
.container {width:300px; margin:50px auto;}
.btn {
position:relative;
width:100%; height:38px;
background:linear-gradient(to bottom, #80A9DA, #8F97C5);
border:1px solid #5D81AB; border-radius:20px;
box-shadow:0 1px 1px rgba(255,255,255,0.8) inset, 2px 2px 4px rgba(0,0,0,0.4), 0 0 0 3px rgba(188,188,188,0.6);
overflow:hidden;
}
.btn-txt {
position:absolute;
width:150px; padding:6px 0 0 20px;
font-size:18px; color:#446388;
text-shadow:1px 1px 1px rgba(255,255,255,0.4); text-transform:uppercase;
}
.btn-slide-txt {
position:absolute; right:50px; top:0;
width:0; height:100%; padding-top:7px;
color:#FFF; text-transform:uppercase;
text-shadow:-1px -1px 1px #000; text-indent:10px;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
background:#63707E;
box-shadow:-1px 0 1px rgba(255,255,255,0.4), 2px 2px 3px rgba(0,0,0,0.3) inset;
transition:all 0.4s ease;
}
.btn-icon {
position:absolute; right:0; top:0;
width:50px; height:100%;
box-shadow:1px 0 1px rgba(255,255,255,0.4) inset;
}
.btn-icon span {
width:50px; height:100%;
background:url(imgs/arrow_right.png) no-repeat center center;
}
.btn:hover .btn-slide-txt {width:40%;}
</style>
</head>
<body>
<div class="container">
<a href="#" class="btn">
<span class="btn-txt">register now</span>
<span class="btn-slide-txt">it's free! just do it</span>
<span class="btn-icon"><span></span></span>
</a>
</div>
</body>
</html>