Hello Coders, I would like to share with you how to Design a Custom Price Button using HTML, CSS and JavaScript. In simple terms, Price Buttons are form input elements in HTML that allow for single time selection; that is, the button is clickable only once. A checkbox is also an input tag property that can be set to check or uncheck, which means it can be clicked two times but a price button only supports a single click.
As we learn on the webpage, Custom Price Button is a caption given to program by me and the image demonstrates the final output. At the center of the image you can see a title with three boxes and a subject of programming courses. All boxes are equipped with a round mark termed radio button and thus on its left side are three circles resembling Price buttons. First box that is currently active is colored in different color from the rest of the boxes which is rendered with grey and its counterpart price button is colored in ON condition with border.
Let me explain. After I clicked the first button, the status was “active”. But after I pressed the second box, the first box switched to “OFF” and the second box switched to “Active”. This is why I used a radio button to make this function. You may already known that it is not difficult to create this program by yourself if you have minimal knowledge about HTML, CSS and JavaScript.
What You’ll Learn:
- Structure the Custom Price Button with HTML
- Styling the Custom Price Button with CSS
- Adding Custom Price Button JavaScript Functionality
Step 1: Structure the Custom Price Button with HTML
Start by creating a new file called (index.html). Then, copy and paste the HTML code provided into this file. Remember to save it with the (.html) extension.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<title>Custom Price Button | CodingLab</title>
<link rel="stylesheet" href="style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div class="card">
<div class="title">Choose Your Course</div>
<div class="content">
<input type="radio" name="rd" id="one" />
<input type="radio" name="rd" id="two" />
<input type="radio" name="rd" id="three" />
<label for="one" class="box first">
<div class="plan">
<span class="circle"></span>
<span class="yearly">HTML & CSS</span>
</div>
<span class="price">100$/year</span>
</label>
<label for="two" class="box second">
<div class="plan">
<span class="circle"></span>
<span class="yearly">JavaScript</span>
</div>
<span class="price">150$/year</span>
</label>
<label for="three" class="box third">
<div class="plan">
<span class="circle"></span>
<span class="yearly">PHP & MySQL</span>
</div>
<span class="price">200$/year</span>
</label>
</div>
<!-- Submit Button -->
<div class="submit-wrapper">
<button type="button" id="submitBtn" disabled>Confirm Selection</button>
</div>
</div>
</body>
</html>
Step 2: Styling the Custom Price Button with CSS
Create a new file called (style.css) and copy the provided code into this file. Don’t forget to save it with the (.css) extension.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
background: linear-gradient(135deg, #667eea, #764ba2);
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.card {
background: #fff;
padding: 30px 40px;
border-radius: 15px;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
max-width: 400px;
width: 100%;
transition: transform 0.3s ease-in-out;
}
.card:hover {
transform: scale(1.02);
}
.title {
font-size: 24px;
font-weight: 600;
color: #333;
margin-bottom: 20px;
text-align: center;
}
.content {
display: flex;
flex-direction: column;
gap: 20px;
}
input[type='radio'] {
display: none;
}
.box {
border: 2px solid #ccc;
padding: 15px 20px;
border-radius: 10px;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
background-color: #f9f9f9;
}
.box:hover {
border-color: #764ba2;
background-color: #f0ebfa;
}
.box .plan {
display: flex;
align-items: center;
gap: 15px;
}
.circle {
height: 18px;
width: 18px;
border: 2px solid #ccc;
border-radius: 50%;
position: relative;
transition: 0.3s;
}
.price {
font-weight: 600;
color: #555;
}
input#one:checked ~ label[for='one'],
input#two:checked ~ label[for='two'],
input#three:checked ~ label[for='three'] {
border-color: #764ba2;
background-color: #e0d4f7;
}
input#one:checked ~ label[for='one'] .circle,
input#two:checked ~ label[for='two'] .circle,
input#three:checked ~ label[for='three'] .circle {
border-color: #764ba2;
background-color: #764ba2;
}
input#one:checked ~ label[for='one'] .circle::after,
input#two:checked ~ label[for='two'] .circle::after,
input#three:checked ~ label[for='three'] .circle::after {
content: '';
position: absolute;
top: 4px;
left: 4px;
height: 6px;
width: 6px;
background: #fff;
border-radius: 50%;
}
.yearly {
font-size: 16px;
font-weight: 500;
color: #333;
}
/* Submit Button Styles */
.submit-wrapper {
text-align: center;
margin-top: 25px;
}
#submitBtn {
padding: 12px 25px;
background: #764ba2;
color: #fff;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 500;
cursor: not-allowed;
transition: all 0.3s ease;
opacity: 0.6;
}
#submitBtn:enabled {
cursor: pointer;
opacity: 1;
transform: scale(1);
}
#submitBtn:hover:enabled {
background: #5a3b85;
transform: scale(1.05);
}
/* Responsive Design */
@media (max-width: 450px) {
.card {
padding: 20px;
}
.title {
font-size: 20px;
}
.box {
flex-direction: column;
align-items: flex-start;
}
.price {
margin-top: 10px;
}
}
Step 3: Adding Custom Price Button JavaScript Functionality
Start by creating a new file called (index.html). Then, copy and paste the HTML code provided into this file. Remember to save it with the (.html) extension.
<script>
const radios = document.querySelectorAll('input[name="rd"]');
const submitBtn = document.getElementById('submitBtn');
radios.forEach((radio) => {
radio.addEventListener('change', () => {
submitBtn.disabled = false;
});
});
submitBtn.addEventListener('click', () => {
const selected = document.querySelector('input[name="rd"]:checked');
const label = document.querySelector(`label[for="${selected.id}"] .yearly`).innerText;
alert(`✅ You have selected: ${label}`);
});
</script>
Final Conclusion
If you face any difficulties while creating your Custom Price Button or your code is not working as expected, you can download the Source Code files for this Custom Price Button for free by clicking on the Download Button.
Happy Coding!
