비전공자 개발일기

CSS Animated Swipe 본문

HTML _CSS

CSS Animated Swipe

HiroDaegu 2022. 8. 31. 00:17
728x90
SMALL

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS ANIMATED SWIPE</title>
  <link rel="stylesheet" href="style.css">
  <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</head>
<body>
  <a href="#" class="btn">
    Swipe Next
    <span>
      <ion-icon name="chevron-forward-outline"></ion-icon>
    </span>
  </a>
</body>
</html>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #28272A;
}

.btn {
  position: relative;
  width: 200px;
  height: 60px;
  background-color: rgba(255, 255, 255, .1);
  border-radius: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgba(255, 255, 255, .1);
  text-decoration: none;
  letter-spacing: 2px;
  border-top: 0.5px solid rgba(255, 255, 255, .35);
  border-left: 0.5px solid rgba(255, 255, 255, .35);
  padding-left: 40px;
  transition: .5s;
  overflow: hidden;
}

.btn:hover {
  padding-left: 0;
  padding-right: 40px;
  color: rgba(255, 255, 255, 1);
}

.btn span {
  position: absolute;
  left: 5px;
  width: 50px;
  height: 50px;
  background-color: #04Fe4D;
  border-radius: 50%;
  transition: .5s ease-in-out;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #1A191D;
  font-size: 1.5em;
}

.btn:hover span {
  left: calc(100% - 55px);
}

.btn:after {
  content: '';
  position: absolute;
  width: 80px;
  height: 100%;
  z-index: 1;
  background-color: rgba(255, 255, 255, .25);
  transform: translateX(-170px) skewX(30deg);
  transition: .75s ease-in-out;
}

.btn:hover:after {
  transform: translateX(170px) skewX(30deg);
}
728x90
LIST

'HTML _CSS' 카테고리의 다른 글

Lighting Loader  (0) 2022.09.02
Emotion Animation  (0) 2022.09.01
Checkbox Custom  (0) 2022.08.30
Lock Mobile Screen Shot  (0) 2022.08.29
Lamp Animation  (0) 2022.08.27
'HTML _CSS' Related Articles more