Hello, guys hope you all are well. Today, we are going to create buttons with increment and decrement numbers.
Let's have a look at the given image of Button with Increment and Decrement Number using HTML CSS. Basically when you click on the plus button the center number increase by one, as when you click on the minus button center number decrease by one.
Increment and decrement the number means the way of increasing and decreasing number. This type of feature is mostly used on the E-commerce product card to order how many products users want to order to buy.
Button with Increment and Decrement Number | Video
You can download all the source code of this project [ Increment & Decrement Number with Button ] from resource download
HTML
<!DOCTYPE html>
<!-- Coding By Grapdroad | https://grapdroad.blogspot.com/ -->
<html lang="en">
<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>Increment & Decrement</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div class="container">
<span class="minus"><i class="fa-solid fa-minus"></i></span>
<span class="num">01</span>
<span class="plus"><i class="fa-solid fa-plus"></i></span>
</div>
<script src="main.js"></script>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
overflow: hidden;
align-items: center;
justify-content: center;
}
body{
min-height: 100vh;
width: 100%;
display: flex;
background: linear-gradient(to bottom, orange 0%,blue 100%);
}
.container{
width:100%;
max-width: 20em;
background-color: #fff;
padding: 2em 0em 2em;
display: flex;
border-radius: 1em;
box-shadow: -3px -3px 2px orange,
3px 3px 5px blue;
}
.container span{
width:100%;
text-align: center;
font-size: 3.5em;
font-weight: 400;
cursor: pointer;
transition: .3s all;
}
.container span:hover{
transition: .3s all;
transform: scale(0.55);
}
.container .num{
font-size: 2.5em;
border-right: .05em solid rgba(0,0,0,0.2);
border-left: .05em solid rgba(0,0,0,0.2);
pointer-events: none;
}
JavaScript
0 Comments