text rolling button only css

자동으로 내용이 바뀌는 버튼 (텍스트 말고 이미지로 활용해도 ok)

 

See the Pen text rolling button only css by publisher.kim (@publisherkim) on CodePen.

 

 

 

html

<botton class="rolling_btn">
  <div class="roll">
    <div>버튼내용1</div>
    <div>버튼내용2</div>
    <div>버튼내용1</div><!-- txt1 clone -->
    <div>버튼내용2</div><!-- txt2 clone -->
  </div>
</button>

 

css

.rolling_btn{display:inline-block; width:100px; height:100px; border-radius:100%; overflow:hidden; border:2px solid #444; background:#fff; cursor:pointer; transition:all 0.2s;}
.rolling_btn:hover{box-shadow:0px 10px 10px rgba(0,0,0,0.1);}
.rolling_btn .roll{animation: roll 10s infinite cubic-bezier(0.25, 0.1, 0.25, 1);}
.rolling_btn .roll div{width:100px; height:100px; display:flex; align-items:center; justify-content:center; color:#444; font-weight:bold; font-size:14px;}
@keyframes roll {
   0% {transform: translateY(-25%)}
   10% {transform: translateY(-50%)}
   50% {transform: translateY(-50%)}
   60% {transform: translateY(-75%)}
   100% {transform: translateY(-75%)}
}