Hello everyone! In this blog, we will learn how to create change button color on click in HTML CSS Javascript.
You know that cool thing when a button changes color when you click it? It’s not just a trendy look, it’s got some serious reasons behind it. In this blog post, we’re gonna break it down and see why that color change on button click is so lit.
Video Tutorial:
Why Button Change Color When Click
First off, why do button pull this color change stunt? It’s not just for show, there’s some legit reasons:
Feedback: That color switch up gives you instant feedback. It’s like the app saying, “Gotcha, I’m on it!” This is super helpful, especially when your click triggers something that takes a sec to kick in, like sending a message.
Easy Browsing: It makes using apps and websites a breeze. You click, you see a color change, and you know it worked. No guessing, just smooth navigation.
Engagement Boost: It’s like a mini game within the app. The color shift keeps you engaged and makes the whole experience more fun. You feel in control, and it’s a win-win.
Cool for Everyone: People with different abilities also benefit. That color change is a handy accessibility feature, making sure everyone can join in the fun.
Getting the Color Change Game On
Now, let’s talk about how they pull off this color switcharoo. It’s not just a one size fits all thing, it depends on what tools you’re using:
1. HTML and CSS
The basic way to do it is with HTML and CSS. You can set up different styles for a button normal look and its clicked look using CSS.
2. JavaScript
For more advanced color changes, they bring in the big guns, like JavaScript. It lets you create custom animation, responding to your click in real time.
The Buzz Around User Engagement
This color change thing isn’t just for kicks, it’s a big deal for user engagement. Check out why it’s worth the hype:
1. Meeting Expectations
When you click a button, you expect something to happen. A color change says, “Yeps, I got your click!” It’s like your digital buddy confirming everything’s good.
2. Visual Vibes
Visual feedback is a secret weapon. Color changes not only say “I got it,” but they also focus your attention on what you clicked. This is super important when you’re doing stuff like filling out forms or shopping online.
3. All About the Fun
Color shifts make your apps and sites feel like a game. They keep you engaged, and that makes the whole experience more awesome.
4. Accessible Awesomeness
For folks with different abilities, the color change is a game changer. It adds extra clues to what’s happening, making sure everyone can get in on the action.
Rocking the Button Color Change
Before you go all Picasso with your button, here are some tips to keep things real:
Keep It Real: Make sure that color change works the same way all over your app or site. Consistency is key, you want everyone to know what’s up.
No Overdoing It: The color change should be cool, but not blinding. Go for colors that work with your style and don’t make people squint.
For All the Homies: Don’t forget about accessibility. Some peeps can’t see the colors, so make sure there’s another way they can tell what’s up.
Source Files – Change Button Color:
HTML Code:
<!DOCTYPE html>
<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>Change Button Color Onclick in Javascript | Codehal</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button class="btn">Button</button>
<script src="script.js"></script>
</body>
</html>CSS Code:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #0b061f;
}
.btn {
padding: 20px 80px;
background: #7d2ae8;
border: 2px solid #fff;
outline: none;
border-radius: 8px;
box-shadow: 0 0 40px #7d2ae8;
font-size: 32px;
color: #fff;
letter-spacing: 1px;
cursor: pointer;
}JavaScript Code:
const btn = document.querySelector('.btn');
btn.addEventListener('click', () => {
btn.style.backgroundColor = '#ffac09';
btn.style.boxShadow = '0 0 40px #ffac09';
btn.style.transition = '.5s ease';
});Conclusion
Changing button color when clicked is a sweet way to upgrade user experience, provide instant feedback, and add a dash of interactivity to your website. It’s a valuable tool for web developers and designers to make website more engaging, accessible, and visually appealing.
Keep in mind that the example we covered is just the beginning. You’ve got the freedom to experiment with color, animation, and conditional changes to create a killer web experience. So go on, add this magic to your web development toolkit, and take your projects to a whole new level. Keep coding and keep it cool.