How to Add Onclick Effect using CSS ? Last Updated : 07 Jul, 2025 Summarize Comments Improve Suggest changes Share Like Article Like Report In this article, we’ll explore how to create an onclick effect using CSS. While the onclick event is generally associated with JavaScript, about 30–40% of basic visual feedback effects—such as color changes, button presses, or shadow effects—can be achieved using CSS alone through the :active pseudo-class.The :active selector applies styles to an element while it is being clicked, allowing you to simulate a click effect without any JavaScript. However, for more advanced interactions or logic-driven behavior, JavaScript is still required.Example 1: However, when a button is clicked, CSS allows you to alter the background color. index.html <!DOCTYPE html> <html> <head> <title>Page Title</title> <style> button { background-color: blue; color: white; padding: 10px; border: none; cursor: pointer; } button:active { background-color: red; } </style> </head> <body> <h2>Welcome To GFG</h2> <button>Click me</button> </body> </html> Output:Can I have an onclick effect in CSS?When the button is clicked, its background color changes from blue to red, creating an "onclick" effect.Example 2: When the box is clicked, it shrinks slightly in size due to the transform property applied to it, creating an "onclick" effect. index.html <!DOCTYPE html> <html> <head> <title>Page Title</title> <style> .box { width: 100px; height: 100px; background-color: blue; cursor: pointer; } .box:active { transform: scale(0.9); } </style> </head> <body> <h2>Welcome To GFG</h2> <div class="box"></div> </body> </html> Output:Can I have an onclick effect in CSS? How to Add Onclick Effect using CSS ? Comment More infoAdvertise with us Next Article How to Create Different Overlay Effects using CSS? A aryash Follow Improve Article Tags : Web Technologies CSS CSS-Questions Similar Reads How to Add Visual Effects to Images using CSS? CSS is most useful for adding visual effects to images, enhancing the overall user experience. By using CSS properties like filter, transform, and transition, you can create dynamic and engaging effects that respond to user interactions. In this article, we will explore examples showcasing the visua 2 min read How to create a Spotlight Effect using HTML and CSS ? In this article, we are going to create a spotlight effect over the image when we hover over it. This is mainly based on HTML, CSS and JavaScript. The below steps have to be followed to create this effect.HTML Section: In this section, we will create a container elements for the background image and 4 min read How to create a marquee effect using CSS ? In this article, we will be creating the marquee effect by using HTML and CSS. This effect can be created by using the <marquee> tag in HTML, but we will not use this tag as it is not widely used nowadays. We will create and design a marquee effect by using the CSS classes and styling properti 2 min read How to Create Different Overlay Effects using CSS? Overlay effects are a powerful way to enhance the visual appeal and user experience of a website. With CSS, creating various overlay effects can be achieved relatively easily, offering designers a plethora of creative possibilities. Below are the approaches to create different overlay effects using 3 min read How to Add Effects to Tooltips ? Tooltips are small informational pop-ups that appear when users hover over or interact with certain elements, providing additional context or explanations. Below are the approaches to add Effects to tooltips using CSS: Table of Content CSS Transition EffectsCSS Animation EffectsCSS Transform Effects 4 min read Apply Glowing Effect to the Image using HTML and CSS While surfing most of the websites you have seen some special effects which can be seen on various images while putting your cursor over them. So, in this article, we are going to implement the same. We can use such images as a card for our website. In this article, you’re going to learn how to app 2 min read Like