The CSS button click effect is a visual change applied to a button. When the button is clicked, that change is visible. In this article, we will understand the CSS button click effect properly.
We can provide various effects to a button, which makes the button look attractive and enhances the user experience. Some common effects are changing the color of the button, creating a ripple effect, creating a shadow, changing the size, etc. We will comprehend the CSS button click effect with the help of demonstrations.
Demonstrations of the CSS Button Click Effect
Let us comprehend some demonstrations of the CSS button click effect.
Demonstration 1:
We are going to create a button that showcases a color transition when it is clicked.
Code:
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Demonstration-1 of the CSS Button Click Effect</title>
<style>
body {
font-family:Georgia, 'Times New Roman', Times, serif;
background-color: rgb(246, 204, 204);
color: brown;
}
div{
display: flex;
align-items: center;
justify-content: center;
}
.btn {
padding: 15px;
background-color: whitesmoke;
color: brown;
border: 1px solid black;
border-radius: 6px;
font-weight: bold;
}
.btn:active {
background-color: gold;
}
</style>
</head>
<body>
<h3>When the button is clicked, then the color of the button changes.</h3>
<div>
<button class="btn">Click Me</button>
</div>
</body>
</html>
Output:
Here is the result where a button is displayed, and if the button remains untouched, a "white smoke" shade of the button will be visible:
When the button is activated, its color shifts to "gold":
Demonstration 2:
We are going to build a button that showcases a gradient color transition when the button is activated.
Code:
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Demonstration-2 of the CSS Button Click Effect</title>
<style>
html, body {
margin-left: 20px;
padding: 10px;
display: contents;
width: 100%;
height: 50%;
background: black;
color: wheat;
}
.gradient-btn {
width: 220px;
height: 50px;
border: none;
border-radius: 15px;
outline: none;
background: #362c2c;
color: wheat;
cursor: pointer;
position: relative;
z-index: 0;
}
.gradient-btn:before {
content: '';
background: linear-gradient(45deg, #fe0808, #fa770b, #f7f31c, #55f316, #26f8d5, #153af6, #821af2, #f423c7, #f71b1b);
position: absolute;
top: -1px;
left: -1px;
z-index: -1;
background-size: 350%;
filter: blur(6px);
height: calc(100% + 5px);
width: calc(100% + 5px);
animation: glowing 15s linear infinite;
opacity: 0;
transition: opacity .2s ease-in-out;
border-radius: 15px;
}
.gradient-btn:active {
color: black
}
.gradient-btn:active:after {
background: transparent;
}
.gradient-btn:hover:before {
opacity: 1;
}
.gradient-btn:after {
content: '';
position: absolute;
z-index: -1;
border-radius: 10px;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: #171515;
}
@keyframes glowing {
0% { background-position: 0 0; }
50% { background-position: 400% 0; }
100% { background-position: 0 0; }
}
</style>
</head>
<body>
<h3>When the button is clicked, then the color of the button demonstrates gradient color.</h3>
<div>
<button class="gradient-btn" type="button">Click Me</button>
</div>
</body>
</html>
Output:
Here is the displayed output featuring a button. If the button remains unclicked, it will continue to be visible as shown below:
When the button is clicked, it triggers a gradient color effect on the button.
Demonstration 3:
In this example, we'll build a button that triggers a bubble animation upon being clicked. We'll employ HTML, CSS, and JavaScript to achieve the bubble effect for the button.
Code:
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Demonstration-3 of the CSS Button Click Effect</title>
<style>
.bubble{
position: absolute;
top: 15%;
left: 35%;
text-align: center;
transform: translate(-50%,-50%);
}
.btn {
font-family: 'Helvetica', 'Arial', sans-serif;
display: inline-block;
padding: 10px 20px;
font-size: 18px;
-webkit-appearance: none;
appearance: none;
position: relative;
background-color: red;
color: wheat;
border-radius: 10px;
border: none;
cursor: pointer;
transition: transform ease-in 0.1s, box-shadow ease-in 0.25s;
box-shadow: 0 2px 25px rgba(112, 4, 4, 0.2);
}
.btn:focus { outline: 0; }
.btn:before, .btn:after {
position: absolute;
display: block;
content: '';
height: 100%;
width: 140%;
left: -20%;
z-index: -1000;
transition: all ease-in-out 0.5s;
background-repeat: no-repeat;
}
.btn:before {
display: none;
top: -75%;
background-image: radial-gradient(circle, red 20%, transparent 20%),
radial-gradient(circle, transparent 20%, red 20%, transparent 30%),
radial-gradient(circle, red 20%, transparent 20%),
radial-gradient(circle, red 20%, transparent 20%),
radial-gradient(circle, transparent 10%, red 15%, transparent 20%),
radial-gradient(circle, red 20%, transparent 20%),
radial-gradient(circle, red 20%, transparent 20%),
radial-gradient(circle, red 20%, transparent 20%),
radial-gradient(circle, red 20%, transparent 20%);
background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%,
10% 10%, 18% 18%;
}
.btn:after {
display: none;
bottom: -75%;
background-image: radial-gradient(circle, red 20%, transparent 20%),
radial-gradient(circle, red 20%, transparent 20%),
radial-gradient(circle, transparent 10%, red 15%, transparent 20%),
radial-gradient(circle, red 20%, transparent 20%),
radial-gradient(circle, red 20%, transparent 20%),
radial-gradient(circle, red 20%, transparent 20%),
radial-gradient(circle, red 20%, transparent 20%);
background-size: 16% 16%, 21% 21%, 19% 19%, 21% 21%, 16% 16%, 11% 11%, 21% 21%;
}
.btn:active {
transform: scale(0.9);
background-color: red;
box-shadow: 0 2px 25px rgba(112, 4, 4, 0.2);
}
.btn.animate:before {
display: block;
animation: top-bubbles ease-in-out 0.75s forwards;
}
.btn.animate:after {
display: block;
animation: bottom-bubbles ease-in-out 0.75s forwards;
}
@keyframes
top-bubbles { 0% {
background-position: 6% 90%, 10% 90%, 11% 91%, 15% 90%, 25% 90%, 25% 90%, 41% 91%,
56% 90%, 72% 90%;
}
50% {
background-position: 0% 75%, 0% 20%, 10% 40%, 25% 0%, 30% 30%, 24% 52%, 50% 50%,
55% 19%, 90% 25%;
}
100% {
background-position: 0% 75%, 0% 10%, 10% 40%, 25% -10%, 25% 20%, 22% 40%, 55% 40%,
65% 10%, 92% 25%;
background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
}
}
@keyframes
bottom-bubbles { 0% {
background-position: 10% -10%, 25% 10%, 50% -10%, 65% -10%, 90% -10%, 65% -10%, 65% 0%;
}
50% {
background-position: 0% 75%, 20% 75%, 50% 60%, 55% 100%, 80% 70%, 90% 65%, 110% 0%;
}
100% {
background-position: 0% 85%, 25% 90%, 50% 65%, 65% 110%, 60% 80%, 95% 80%, 110% 10%;
background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
}
}
</style>
</head>
<body>
<h3>When the button is clicked, then the bubbles appear around the button.</h3>
<div class="bubble">
<button class="btn">Click me!</button>
</div>
<script>
var bubbleButton = function(e) {
e.preventDefault;
e.target.classList.remove('animate');
e.target.classList.add('animate');
setTimeout(function(){
e.target.classList.remove('animate');
},700);
};
var classname = document.getElementsByClassName("btn");
for (var i = 0; i < classname.length; i++) {
classname[i].addEventListener('click', bubbleButton, false);
}
</script>
</body>
</html>
Output:
Here is the result where we can observe a button, and when the button remains unclicked, it displays as depicted below:
When the button is activated, bubbles will emerge around the button as depicted below:
Demonstration 4:
We will generate a button in this example, which displays a deletion animation upon clicking the button.
Code:
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Demonstration-4 of the CSS Button Click Effect</title>
<style>
* {
outline: none;
}
html, body {
height: 100%;
min-height: 100%;
}
body {
margin: 0;
background-color: #fcbdf9;
display: flex;
}
#button-cover {
position: absolute;
right: 30%;
left: 0;
top: 25%;
height: 150px;
width: 150px;
border-radius: 50%;
margin: -96px auto 0 auto;
background-color: white;
box-shadow: 0 0 0 6px white;
overflow: hidden;
}
#checkbox {
position: absolute;
margin: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
opacity: 0;
z-index: 3;
}
#bin-icon {
position: absolute;
margin: -26px auto 0 auto;
top: 50%;
left: 0;
right: 0;
height: 58px;
width: 42px;
z-index: 2;
border-radius: 50%;
}
#cover {
position: relative;
border-radius: 5px;
height: 5px;
width: 51px;
left: -5px;
}
#cover:before {
content: "";
position: absolute;
margin: 0 auto;
right: 0;
top: -4px;
left: 0;
border-radius: 10px 10px 0 0;
height: 5px;
width: 9px;
}
#box {
position: relative;
height: 52px;
margin-top: 2px;
border-radius: 0 0 8px 8px;
}
#box-inner {
position: relative;
margin: 0 auto;
top: 4px;
border-radius: 0 0 6px 6px;
height: 45px;
width: 35px;
background-color: #fff;
}
#bin {
position: relative;
margin: 0 auto;
top: 10px;
}
#bin, #bin:before, #bin:after {
border-radius: 6px;
height: 29px;
width: 4px;
}
#bin:before,
#bin:after {
content: "";
position: absolute;
}
#bin:before {
left: -9px;
}
#bin:after {
left: 9px;
}
#layer {
position: absolute;
bottom: -20px;
right: -20px;
height: 0;
width: 0;
border-radius: 50%;
background-color: grey;
transition: 0.30s ease all;
z-index: 1;
}
#cover, #cover:before, #box,#bin, #bin:before,#bin:after {
background-color: #09b823;
transition: 0.2s ease background-color;
}
#checkbox:checked ~ #bin-icon #cover, #checkbox:checked ~ #bin-icon #cover:before,#checkbox:checked ~ #bin-icon #box,#checkbox:checked ~ #bin-icon #box-inner {
background-color: wheat;
}
#checkbox:checked ~ #bin-icon #bin, #checkbox:checked ~ #bin-icon #bin:before,#checkbox:checked ~ #bin-icon #bin:after {
background-color: grey;
}
#checkbox:checked + #bin-icon #box {
animation: effect 0.2s ease 0.1s;
}
#checkbox:checked + #bin-icon #cover {
animation: lift-up 0.8s ease 0.1s, effect_u 0.8s ease 0.1s,
effect_l 0.2s ease 0.8s;
}
#checkbox:checked ~ #layer {
width: 225px;
height: 225px;
}
@keyframes effect {
0% {
transform: rotateZ(3deg);
}
25% {
transform: rotateZ(0);
}
75% {
transform: rotateZ(-3deg);
}
100% {
transform: rotateZ(0);
}
}
@keyframes lift-up {
0% {
top: 0;
}
50% {
top: -36px;
}
100% {
top: 0;
}
}
@keyframes effect_u {
0% {
transform: rotateZ(0);
}
25% {
transform: rotateZ(-15deg);
}
50% {
transform: rotateZ(0deg);
}
75% {
transform: rotateZ(15deg);
}
100% {
transform: rotateZ(0);
}
}
@keyframes effect_l {
0% {
transform: rotateZ(0);
}
80% {
transform: rotateZ(3deg);
}
90% {
transform: rotateZ(-3deg);
}
100% {
transform: rotateZ(0);
}
}
</style>
</head>
<body>
<h3>When the button is clicked, then it demonstrates a delete effect on the button.</h3>
<div id="button-cover">
<input type="checkbox" id="checkbox">
<div id="bin-icon">
<div id="cover"></div>
<div id="box">
<div id="box-inner">
<div id="bin"></div>
</div>
</div>
</div>
<div id="layer"></div>
</div>
</body>
</html>
Output:
Here is the displayed output featuring a button, which remains in its initial state when not activated:
When the button is activated, it will display a visual effect resembling a delete button, as depicted below:
Demonstration 5:
We will create a button in this example that exhibits a pulsating animation upon being clicked.
Code:
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Demonstration-5 of the CSS Button Click Effect</title>
<style>
body {
color: beige;
}
.button{
position: relative;
background-color: rgb(202, 38, 38);
color: snow;
font-size: 18px;
border-radius: 36px;
padding: 16px 30px;
text-align: center;
text-decoration: none;
cursor:pointer;
user-select:none;
cursor: pointer;
transition-duration: 0.4s;
-webkit-transition-duration: 0.4s;
}
.button:hover {
transition-duration: 0.1s;
background-color: #be4444;
}
.button:after {
content: "";
display: block;
position: absolute;
border-radius: 36px;
height: 100%;
width: 100%;
opacity: 0;
left: 0;
top:0;
transition: all 0.5s;
box-shadow: 0 0 9px 39px rgb(250, 226, 226);
}
.button:active:after {
border-radius: 36px;
box-shadow: 0 0 0 0 rgb(250, 226, 226);
left: 0;
top:0;
opacity: 1;
transition: 0s;
}
.button:active {
top: 2px;
}
html, body{
height:100%;
margin: 0;
}
body{
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
font-family:'Times New Roman', Times, serif;
font-size: 15px;
background-image: linear-gradient(to bottom right, #f8e14d, #f74333);
}
</style>
</head>
<body>
<h2>When the button is clicked, then it demonstrates a pulsing effect on the button.</h2>
<a class="button">Click Me</a>
</body>
</html>
Output:
Here is the result where a button is visible, and when it remains unclicked, it displays as illustrated:
When the button is clicked, it displays a pulsating effect like the one demonstrated below:
Demonstration 6:
We will create a button in this example that displays a press effect upon clicking the button.
Code:
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Demonstration-6 of the CSS Button Click Effect</title>
<style>
:root {
--primary: #6a1fa7;
--primary-dark: #520b8b;
}
* {
box-sizing: border-box;
}
body {
background-color: snow;
margin: 20px;
padding: 0;
}
.container {
display: flex;
align-items: center;
justify-content: center;
height: 20vh;
margin-right: 75px;
}
.btn {
background: var(--primary);
border: 0;
box-shadow: 0 10px 0 var(--primary-dark), 0 6px 18px -4px black;
color: whitesmoke;
cursor: pointer;
font-family:Georgia, 'Times New Roman', serif;
border-radius: 10px;
height: 45px;
width: 175px;
padding: 6px;
font-size: 18px;
font-weight: bold;
text-transform: uppercase;
transition: box-shadow 0.2s ease-in-out, margin-top 0.2s ease-in-out,
opacity 0.2s ease-in-out;
}
.btn:hover, .btn:focus {
opacity: 1;
outline: 0;
}
.btn:active {
box-shadow: none;
margin-top: 15px;
}
</style>
</head>
<body>
<h2>When the button is clicked, then it demonstrates a push effect on the button.</h2>
<div class="container">
<button class="btn">Click Me</button>
</div>
</body>
</html>
Output:
Here is the displayed output featuring a button, which remains in its initial state when not activated, as illustrated below:
When the button is activated, it will display a pulsating effect like the one depicted below:
Conclusion
In this guide, we've explored the CSS button click effect and demonstrated through examples how different effects can be implemented on a button upon clicking.