html5 data속성을 이용한 버튼 애니메이션

Html5의 data 속성을 활용한 Css버튼 애니메이션 예제
Html5의 data 속성은 사용자 정의 데이터 속성이라 할 수 있다. 속성을 임의적으로 정하는 것이 가능한데 data-name=”John” data-city=”Boston” 이런식으로 사용자 정의가 가능한 속성. 즉 태그내에 data- 로 시작하는 속성은 개인 테이터로 규정한다.

// 스타일 지정

<a href="#" class="uk-btn" data-btn="Btn Hover Effect">Btn Hover Effect</a>