비전공자 개발일기

Multi-step Growing BTN 본문

HTML _CSS

Multi-step Growing BTN

HiroDaegu 2022. 10. 14. 00:38
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>MULTI_STEP GROWING BTN</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <input checked type="radio" id="step-1" name="button-step" value="step-1">  
  <input type="radio" id="step-2" name="button-step" value="step-2">  
  <input type="radio" id="step-3" name="button-step" value="step-3">  
  <input type="radio" id="step-4" name="button-step" value="step-4">  
  <input type="radio" id="step-5" name="button-step" value="step-5">  
  <input type="radio" id="step-6" name="button-step" value="step-6">  
  <input type="radio" id="step-7" name="button-step" value="step-7">  
  <a href="javascript:void(0);" title="button">  
   &#9829;  
   <label for="step-1"></label>  
   <label for="step-2"></label>  
   <label for="step-3"></label>  
   <label for="step-4"></label>  
   <label for="step-5"></label>  
   <label for="step-6"></label>  
   <label for="step-7"></label>  
  </a>  
</body>
</html>
 /* Try clicking it quickly and slowly. Try long and short button presses. :^) */  
 /* Remove a::before from line 55 to remove text. */  
 *,  
 *::before,  
 *::after {  
  box-sizing: border-box;  
  font-family: "Poppins", sans-serif;  
 }  
 body,  
 html {  
  -webkit-text-size-adjust: 100%;  
  -webkit-tap-highlight-color: transparent;  
  -webkit-font-smoothing: antialiased;  
  text-rendering: optimizeLegibility;  
  line-height: 0;  
  font-weight: 400;  
  color: white;  
 }  
 body {  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  justify-content: center;  
  width: 100vw;  
  height: 100vh;  
  overflow: hidden;  
  background: black;  
  margin: 0;  
 }  
 a {  
  position: relative;  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  justify-content: center;  
  text-decoration: none;  
  background: url("https://picsum.photos/id/517/1500/1500");  
  background-position: center;  
  text-shadow: 0px 0px 10px hotpink, 1px 1px 0px hotpink, -1px -1px 0px hotpink,  
   1px 1px 0px black;  
  z-index: 1;  
  transition: all 0.3s ease-in-out;  
 }  
 a:active {  
  transform: scale(0.85);  
  font-size: 100% !important;  
  transition: all 0.1s ease-in-out;  
 }  
 a::before {  
  position: absolute;  
  bottom: -90px;  
  width: 200px;  
  height: auto;  
  line-height: 20pt;  
  font-size: 20pt;  
  content: "multi-step css only ♥ button";  
  text-align: center;  
 }  
 a::after {  
  position: absolute;  
  top: 0;  
  left: 0;  
  width: 100%;  
  height: 100%;  
  content: "";  
  background: hotpink;  
  mix-blend-mode: color;  
  z-index: -1;  
  transition: all 0.3s ease-in-out;  
 }  
 input {  
  display: none;  
 }  
 label {  
  position: absolute;  
  top: 0;  
  left: 0;  
  width: 100%;  
  height: 100%;  
  content: "";  
  display: none;  
 }  
 label:hover {  
  cursor: pointer;  
 }  
 input:nth-child(1):checked ~ a {  
  background-size: 100%;  
  width: 120px;  
  height: 40px;  
  border-radius: 5px;  
  font-size: 20pt;  
  color: white;  
 }  
 input:nth-child(1):checked ~ a::after {  
  opacity: 1;  
  background: white;  
  border-radius: 5px;  
 }  
 input:nth-child(1):checked ~ a > label:nth-child(2) {  
  display: initial;  
 }  
 input:nth-child(2):checked ~ a {  
  background-size: 125%;  
  width: 136px;  
  height: 52px;  
  font-size: 25pt;  
  border-radius: 10px;  
  color: #ffc8ec;  
  outline: 1px solid hotpink;  
 }  
 input:nth-child(2):checked ~ a:active {  
  font-size: 180% !important;  
 }  
 input:nth-child(2):checked ~ a::after {  
  opacity: 0.2;  
  border-radius: 10px;  
 }  
 input:nth-child(2):checked ~ a > label:nth-child(3) {  
  display: initial;  
 }  
 input:nth-child(3):checked ~ a {  
  background-size: 155%;  
  width: 126px;  
  height: 68px;  
  font-size: 35pt;  
  border-radius: 15px;  
  color: #ff9ede;  
  outline: 1px solid hotpink;  
  outline-offset: 5px;  
  text-shadow: 1px 1px 0px black, -1px -1px 0px black, 1px -1px 0px black,  
   -1px 1px 0px black;  
 }  
 input:nth-child(3):checked ~ a:active {  
  font-size: 280% !important;  
 }  
 input:nth-child(3):checked ~ a::after {  
  opacity: 0.4;  
  border-radius: 15px;  
 }  
 input:nth-child(3):checked ~ a > label:nth-child(4) {  
  display: initial;  
 }  
 input:nth-child(4):checked ~ a {  
  background-size: 185%;  
  width: 116px;  
  height: 88px;  
  font-size: 50pt;  
  border-radius: 20px;  
  color: #ff73cf;  
  outline: 2px solid hotpink;  
  outline-offset: 15px;  
  text-shadow: 1px 1px 0px black, -1px -1px 0px black, 1px -1px 0px black,  
   -1px 1px 0px black;  
 }  
 input:nth-child(4):checked ~ a:active {  
  font-size: 380% !important;  
 }  
 input:nth-child(4):checked ~ a::after {  
  opacity: 0.6;  
  border-radius: 20px;  
 }  
 input:nth-child(4):checked ~ a > label:nth-child(5) {  
  display: initial;  
 }  
 input:nth-child(5):checked ~ a {  
  background-size: 210%;  
  width: 114px;  
  height: 114px;  
  font-size: 70pt;  
  border-radius: 25px;  
  color: #ff4bc2;  
  outline: 3px solid hotpink;  
  outline-offset: 15px;  
  text-shadow: 1px 1px 0px black, -1px -1px 0px black, 1px -1px 0px black,  
   -1px 1px 0px black;  
 }  
 input:nth-child(5):checked ~ a:active {  
  font-size: 480% !important;  
 }  
 input:nth-child(5):checked ~ a::after {  
  opacity: 0.8;  
  border-radius: 25px;  
  backdrop-filter: blur(1px);  
 }  
 input:nth-child(5):checked ~ a > label:nth-child(6) {  
  display: initial;  
 }  
 input:nth-child(6):checked ~ a {  
  background-size: 250%;  
  width: 148px;  
  height: 148px;  
  font-size: 100pt;  
  border-radius: 30px;  
  color: #ff29b6;  
  outline: 3px solid hotpink;  
  outline-offset: 20px;  
 }  
 input:nth-child(6):checked ~ a:active {  
  font-size: 580% !important;  
 }  
 input:nth-child(6):checked ~ a::after {  
  opacity: 0.9;  
  border-radius: 30px;  
  backdrop-filter: blur(2px);  
 }  
 input:nth-child(6):checked ~ a > label:nth-child(7) {  
  display: initial;  
 }  
 input:nth-child(7):checked ~ a {  
  background-size: 300%;  
  width: 192px;  
  height: 192px;  
  font-size: 140pt;  
  border-radius: 35px;  
  color: #ff00a8;  
  outline: 4px solid #ff00a8;  
  outline-offset: 20px;  
 }  
 input:nth-child(7):checked ~ a:active {  
  font-size: 680% !important;  
 }  
 input:nth-child(7):checked ~ a::after {  
  opacity: 1;  
  border-radius: 35px;  
  backdrop-filter: blur(4px);  
 }  
 input:nth-child(7):checked ~ a > label:nth-child(1) {  
  display: initial;  
 }
728x90
LIST

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

Animated BG  (0) 2022.10.18
Circular Progress Bar  (0) 2022.10.17
Password Strength Checker  (0) 2022.10.13
Eye Follow Mouse Cursor  (0) 2022.10.12
Hover Menu Text  (0) 2022.10.08
'HTML _CSS' Related Articles more