[HTML+CSS3] 애니메이션 버튼

ODaram 2022. 10. 7. 17:11
애니메이션 버튼
애니메이션 버튼

<!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>
  <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:200px; padding:6px 0 0 20px;
      /* left, top 기본값 0 이다. */
      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;
      /*icon 의 right를 0으로 잡았고, icon span 넓이가 50이기 때문에*/
      width:0%; height:100%; padding-top:7px; 
      /*padding:6px 0 0 10px;*/ /*왼쪽 10px 때문에 박스가 보임*/
      color:#FFF; text-transform:uppercase;
      text-shadow:-1px -1px 1px #000; text-indent :10px;/*indent : 들여쓰기*/
      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%; /*부모요소에서는 height 100% 적용 안됨*/
      box-shadow:1px 0 1px rgba(255,255,255,0.4) inset;
    }
    .btn-icon span {
      width:50px; height:100%;
      background:url(imgs/img_arrow.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>