Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Add a pressed effect on button click with CSS
In order to allow users to interact with a website or application, buttons are an essential component of web design. The user experience can be greatly improved and interactions made more interesting by adding a visually beautiful and innovative click effect to button using CSS.
The active pseudo-class can be used to create a pressed effect on a button click using CSS. This style provides visual feedback by defining how the button will look when it is clicked. Before knowing more about it, let’s have a quick view about button in HTML.
HTML button
In HTML, the clickable button is defined by the <button> tag. We can use both text and images inside the <button> tag. The default <button> type is different for different browsers and are used to submit the content. We can use the CSS tool to style the button.
Syntax
Following is the syntax for HTML button
<button>....</button>
Example
Let's look at the following example, where we are going to create a button and apply CSS to it.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #34495E;
text-align: center;
}
button {
margin: 150px;
position: relative;
overflow: hidden;
padding: 10px 40px;
font-size: 30px;
font-family: verdana;
background-color: transparent;
border: none;
color: #DE3163;
transition: 0.3s;
&::before {
content: '';
height: 3px;
width: 0;
left: 0;
bottom: 0;
position: absolute;
background: #E8DAEF;
transition: 0.4s;
}
&:hover {
&::before {
width: 100%;
}
}
}
span.y {
background-color: #D5F5E3;
border-radius: 100%;
position: absolute;
transform: scale(0);
animation: y .4s linear forwards;
}
@keyframes y {
to {
transform: scale(1);
opacity: 0;
}
}
</style>
</head>
<body>
<div>
<button class="tp">CLICK ME</button>
</div>
<script>
var button = document.querySelectorAll('.tp');
Array.prototype.forEach.call(button, function(a) {
a.addEventListener('click', ripple)
});
function ripple(event) {
var x = document.createElement('span');
x.classList.add('y');
var max = Math.max(this.offsetWidth, this.offsetHeight);
x.style.width = x.style.height = max * 2 + 'px';
var rect = this.getBoundingClientRect();
x.style.left = event.clientX - rect.left - max + 'px';
x.style.top = event.clientY - rect.top - max + 'px';
this.appendChild(x);
}
</script>
</body>
</html>
When we run the above code, it will generate an output consisting of the click button on the webpage. When the user tries to click on the button, it displays effects that are made by CSS.
Example
Considering another example, where we are going to add an ASTERISM when hovering over the button.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #D5F5E3;
text-align: center;
}
.tp {
border-radius: 10px;
background-color: #D2B4DE;
border: none;
color: #DE3163;
font-size: 30px;
font-family: verdana;
padding: 10px;
width: 150px;
cursor: pointer;
margin: 50px;
}
.tp span {
position: relative;
transition: 0.3s;
}
.tp span:after {
content: '\2042';
position: absolute;
opacity: 0;
top: -3px;
right: -25px;
transition: 0.5s;
}
.tp:hover span {
padding-right: 30px;
}
.tp:hover span:after {
opacity: 2;
right: 1px;
}
</style>
</head>
<body>
<button class="tp">
<span>CLICK</span>
</button>
</body>
</html>
On running the above code, the output window will pop up, displaying the button applied with CSS on the webpage. when the user tries to hover over the ASTERISM.
Example
In the following example, we are going to create a simple pressing effect on the button using CSS.
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: orange;
color: white;
border: none;
border-radius: 7px;
box-shadow: 0 5px #999;
display: inline-block;
padding: 10px;
font-size: 16px;
cursor: pointer;
text-align: center;
outline: none;
}
.button:hover {
background-color: blue;
}
.button:active {
background-color: orange;
box-shadow: 0 5px gray;
transform: translateY(2px);
}
</style>
</head>
<body>
<button class="button">Result</button>
</body>
</html>
When we run the above code, it will generate an output consisting of a pressing effect applied with CSS displayed on the webpage.
985 Views
