more 버튼 ui

by Kim Ara

HTML

<div class="more"><a href="/business/intro.asp">더보기</a></div>

CSS

.more{position:absolute; left:0; top:27px;}
.more a{display:block ;width:41px; height:41px; background-color:#888888; overflow:hidden; text-indent:-9999px; position:relative;}
.more a:after{content:'';position:absolute;left:20px;top:12px;background-color:#fff;width:1px;height:17px;transition-duration:0.3s;}
.more a:before{content:'';position:absolute;left:12px;top:20px;background-color:#fff;width:17px;height:1px;transition-duration:0.3s;}
.more a:hover:after{-ms-transform: rotate(-135deg); /* IE 9 */-webkit-transform: rotate(-135deg); /* Chrome, Safari, Opera */transform: rotate(-135deg);left:23px;}
.more a:hover:before{-ms-transform: rotate(-135deg); /* IE 9 */ -webkit-transform: rotate(-135deg); /* Chrome, Safari, Opera */ transform: rotate(-135deg); width:7px; left:12px; top:23px;}