CSS 버튼 애니메이션

코딩(개발)/웹퍼블리싱

CSS 버튼 애니메이션

플랜데버 2022. 5. 26. 15:51

쇼핑몰이나 홈페이지에 많이 쓰이는 심플한 애니메이션 효과

html 소스

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>CSS3 Button Animations</title>
  <link rel="stylesheet" href="css/style_toding.css">
</head>
<body>
<div class="wrapper">
  
  <h1> MIIU SOFT CSS SOURCE CODE</h1>
  <button class="slide_left">Slide From Left</button><br/>
  <button class="slide_right">Slide From Right</button><br/>
  <button class="slide_top">Slide From Top</button><br/>
  <button class="slide_bottom">Slide From Bottom</button><br/>
 
</div>
</body>
</html>

css 소스

@font-face { 
  font-family: 'NanumGothic'; 
  src: url('https://cdn.jsdelivr.net/gh/miiusoft/font/NanumGothic/NanumGothic.woff') format('woff'); 
  font-weight: normal; 
  font-style: normal; }

* {
  box-sizing: border-box;
}

.wrapper {
  max-width: 65rem;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  text-align: center;
  background: #fff;
}



button {
  width: 260px;
  height: 70px;
  font-size: 18px;
  font-family: 'NanumGothic';
  background: #fff;
  color: #000;
  border: 1px solid #000;
  margin: 1rem;
  position: relative;
  z-index: 1;
  overflow: hidden;
  text-align: center;
}


button:before{ 
  content: ''; 
  background: #000; 
  position: absolute; 
  z-index: -1;
}

button:hover{
  color: #fff;
}

.slide_left:before{
  left:-100%;
  right: 100%;
  top: 0;
  bottom: 0;
}

button[class^="slide"]:before{
transition: 0.35s;
}

button[class^="slide"]:hover:before{
  left:0;
  right:0;
  top:0;
  bottom:0;
  
}

.slide_right:before{
  left:100%;
  right: -100%;
  top: 0;
  bottom: 0;
}

.slide_top:before{
  left:0;
  right: 0;
  top: -100%;
  bottom: 100%;
}

.slide_bottom:before{
  left:0;
  right: 0;
  top: 100%;
  bottom: -100%;
}

html 소스

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>CSS3 Button Animations</title>
  <link rel="stylesheet" href="css/style_toding.css">
</head>
<body>
<div class="wrapper">
  
  <h1> MIIU SOFT CSS SOURCE CODE</h1>
 
  <button class="grow_box">Grow Box</button><br/>
  <button class="grow_ellipse">Grow Ellipse</button><br/>
  <button class="grow_skew_forward">Grow Skew</button><br/>
  <button class="grow_skew_backward">Grow Skew</button><br/>
  <button class="grow_spin">Grow Spin</button>
  
</div>
</body>
</html>

css 소스


@font-face { 
  font-family: 'NanumGothic'; 
  src: url('https://cdn.jsdelivr.net/gh/miiusoft/font/NanumGothic/NanumGothic.woff') format('woff'); 
  font-weight: normal; 
  font-style: normal; }

* {
  box-sizing: border-box;
}

.wrapper {
  max-width: 65rem;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  text-align: center;
  background: #fff;
}

button {
  width: 260px;
  height: 70px;
  font-size: 18px;
  font-family: 'NanumGothic';
  background: #fff;
  color: #000;
  border: 1px solid #000;
  margin: 1rem;
  position: relative;
  z-index: 1;
  overflow: hidden;
  text-align: center;
}


button:before{ 
  content: ''; 
  background: #000; 
  position: absolute; 
  z-index: -1;
}

button:hover{
  color: #fff;
}

.grow_box:before{
  left:0;
  right: 0;
  top: 0;
  bottom: 0;
  transform:scale(0);
  transition: 0.35s;
}

.grow_box:hover:before{
  transform:scale(1);
}

.grow_ellipse:before{
  border-radius: 50%;
  left: -50%;
  right: -50%;
  top:-50%;
  bottom: -50%;
  transform:scale(0);
  transition: 0.35s;
}

.grow_ellipse:hover:before{
  transform:scale(1);
}

.grow_skew_forward:before{
  left:-20%;
  right: -20%;
  top: 0;
  bottom: 0;
  transform :skewX(-45deg) scaleX(0);
  transition: 0.35s;
}

.grow_skew_forward:hover:before{
  transform :skewX(-45deg) scaleX(1);
}

.grow_skew_backward:before{
  left:-20%;
  right: -20%;
  top: 0;
  bottom: 0;
  transform :skewX(45deg) scaleX(0);
  transition: 0.35s;
}

.grow_skew_backward:hover:before{
  transform :skewX(45deg) scaleX(1);
}

.grow_spin:before{
  left:0;
  right: 0;
  top: 0;
  bottom: 0;
  transform: scale(0) rotate(-180deg);
  transition: 0.35s;
}

.grow_spin:hover:before{
  transform :skewX(45deg) scaleX(1);
  transform: scale(1) rotate(0deg);
}

slide 버튼을 많이 쓰는 편이긴 한데 글로우 스타일도 나쁘진 않다.