[HTML/CSS] 버튼에 HOVER 속성을 이용하여 에니메이션을 넣어보자

html

			<div class = "on">온라인 판매처
			<div class = "online"><a href = "" class = "bt naver">NAVER</a></div>
				<div class = "online"><a href = "" class = "bt eleven">11ST</a></div>
				<div class = "online"><a href = "" class = "bt auction">AUCTION</a></div>
				<div class = "online"><a href = "" class = "bt coupang">COUPANG</a></div>
				<div class = "online"><a href = "" class = "bt gmarket">G MARKET</a></div>
			</div>

css

.bt, .bt a{
	text-decoration: none;
	width: 100%;
	height: auto;
	padding-top : 1%;
	padding-bottom: 1%;
	position: relative;
	display: block;
outline: #333 solid 4px;
	font-size: 0.7em;
	
	color: #fff;
	background-color:#000;;
	border: 4px solid # #C1C1C1;
	font-weight: normal;;
}

.bt:hover{color: #000;  -webkit-transition: all .7s ease;  -moz-transition: all .7s ease;  -o-transition: all .7s ease;
  transition: all .7s ease;	box-shadow: 500px 0 0 0 rgba(255, 255, 255, 1) inset; 			outline: dotted 0px #fff;}

이렇게 하면 아래처럼 나온다

온라인 판매처

NAVER

11ST

AUCTION

COUPANG

G MARKET