타이머 버튼 만들기


페이지 접속 후 특정 시간이 지나면 숨어 있던 버튼이 나타나도록 제작할 수 있습니다. 이와 같은 타이머 버튼은 종종 마케팅에 활용되며, 방문자가 필수 콘텐츠를 보도록 유도하는데 사용될 수 있습니다.

이 버튼을 만들려면 코드를 사용해야 합니다. 아래 설명과 샘플 코드를 사용해 타이머 버튼을 제작해 보세요.

1. 해당 코드


 <style>
.hiddenBlock {
    display: none;
}
</style>

<p class="hiddenBlock" style="text-align: 정렬;">
  <a style="font-weight: 텍스트 두께; font-size: 텍스트 크기;" class="btn btn-primary btn-lg" href="링크 주소">버튼명</a>
</p>

<script type="text/javascript">$(document).ready(function(){setTimeout(function(){$('.hiddenBlock').show()},시간)});</script>


  • 정렬: 버튼을 정렬시킬 수 있습니다. left, center, right 3가지 중 하나를 입력합니다.
  • 텍스트 두께: 버튼 텍스트의 두께를 정할 수 있습니다. normal로 바꾸면 기본으로 돌아갑니다.
  • 텍스트 크기: 버튼 텍스트의 두께를 지정합니다. bold 라고 입력하면 두껍게 작성되며, normal로 입력하면 기본으로 돌아갑니다.
  • 링크 주소: 버튼을 클릭하면 이동할 주소(URL)를 입력합니다. 예) https://imweb.me
  • 버튼명: 버튼에 표시될 버튼 이름을 입력합니다.
  • 시간: 1000당 1초라고 생각하시면 되겠습니다. 3초 후 버튼이 나오게 하려면 3000을 입력합니다



* 페이지가 열린후 3초가 지나면 버튼이 나타납니다.