[CSS] a 태그 hover 모음

[CSS] a 태그 hover 모음

a 태그 링크 모던한 디자인 

 

 

1. hover effect 2 

HTML

<!--hover effect 2 -->
<div class="back color-2"> <div class="row columns"> <h3>Effect 2</h3> <ul class="menu align-center expanded text-center SMN_effect-2"> <li><a href="">Home</a></li> <li><a href="">About</a></li> <li><a href="">Gallery</a></li> <li><a href="">Notes</a></li> <li><a href="">Contact</a></li> </ul> </div> </div>
<!-- //hover effect 2 -->

 

CSS

/*hover effect 2 */
.SMN_effect-2 a:before, .SMN_effect-2 a:after { position: absolute; top: 100%; left: 0; width: 100%; height: 2px; background: rgba(255, 255, 255, 0.5); content: ''; -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; -webkit-transform: scale(0.85); -moz-transform: scale(0.85); transform: scale(0.85); } .SMN_effect-2 a:after { opacity: 0; -webkit-transition: top 0.3s, opacity 0.3s, -webkit-transform 0.3s; -moz-transition: top 0.3s, opacity 0.3s, -moz-transform 0.3s; transition: top 0.3s, opacity 0.3s, transform 0.3s; } .SMN_effect-2 a:hover:before, .SMN_effect-2 a:hover:after, .SMN_effect-2 a:focus:before, .SMN_effect-2 a:focus:after { -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); background: #c8a755; } .SMN_effect-2 a:hover:after, .SMN_effect-2 a:focus:after { top: 0%; opacity: 1; }