multi-step growing button | CSS Only | New Design Button

Multi-step growing  button | CSS Only | New Design Button

Welcome🎉 to Code With Random blog. In this blog, we learn how to create a multi-step growing button. We use HTML & CSS  for  multi-step growing button. Hope you enjoy our blog so let’s start with a basic HTML structure for the multi-step growing button. 

HTML code

 <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>

There is all HTML code for the multi-step growing button. Now, you can see output without CSS, then we write CSS for the multi-step growing button.

 /* 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;
}

Now we have completed our CSS section,  Here is our final updated output CSS.

Final Output

Now we have completed our CSS section,  Here is our updated output with CSSHope you like the multi-step growing button, you can see output project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕

In this post, we learn how to create a multi-step growing button using simple HTML & CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki 

code by – MOZZARELLA

Check out more…..



Leave a Reply