본문으로 바로가기

Close button Animation

category StyleSheet/CSS 2016.09.29 08:34

닫기 버튼 애니메이션

이 포스팅에서는 애니메이션 효과가 적용된 닫기 버튼에 대해 소개합니다.




Close button Animation DEMO

html
<div class="outer">
	<div class="inner">
		<label>Back</label>
	</div>
</div>


css
* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

body {
	background: #141926;
	font-family: Helvetica, Arial, sans-serif;
}

.outer {
	position: relative;
	margin: auto;
	width: 70px;
	margin-top: 200px;
	cursor: pointer;
}

.inner {
	width: inherit;
	text-align: center;
}

label {
	font-size: .8em;
	line-height: 4em;
	text-transform: uppercase;
	color: #fff;
	transition: all .3s ease-in;
	opacity: 0;
}

.inner:before,
.inner:after {
	position: absolute;
	content: '';
	height: 1px;
	width: inherit;
	background: #FFC107;
	left: 0;
	transition: all .3s ease-in;
}

.inner:before {
	top: 50%;
	transform: rotate(45deg);
}

.inner:after {
	bottom: 50%;
	transform: rotate(-45deg);
}

.outer:hover label {
	opacity: 1;
}

.outer:hover .inner:before,
.outer:hover .inner:after {
	transform: rotate(0);
}

.outer:hover .inner:before {
	top: 0;
}

.outer:hover .inner:after {
	bottom: 0;
}



Close Button View

See the Pen close button 애니메이션 by jaeheekim (@jaehee) on CodePen.



Jaehee's WebClub


'StyleSheet > CSS' 카테고리의 다른 글

select box CSS  (4) 2016.09.29
CSS Button Transitions  (0) 2016.09.29
Close button Animation  (0) 2016.09.29
CSS3 Custom Checkbox, Radio  (0) 2016.09.29
Only CSS Checkbox  (1) 2016.09.29
커스텀 라디오, 체크박스  (0) 2016.09.29

댓글을 달아 주세요