W3docs
en
Log in

How to Add an Onclick Effect with HTML and CSS

In this snippet, we’ll demonstrate how to add an onclick event in CSS. The best way of creating an onclick effect is using the well-known checkbox hack.

Tags

Solutions with HTML and CSS

The most common way of creating a visual click effect with CSS is using the checkbox hack. This method has broad browser support. You need to add a <span class="attribute">for</span> attribute to the <label> element and an <span class="attribute">id</span> attribute to the <input> element.

Example of adding a click effect using the checkbox hack:

<!DOCTYPE html>
<html>
  <head>
    <style>
      label {
        display: block;
        background: #dbdbd9;
        width: 80px;
        height: 80px;
      }
      #box:checked + label {
        background: #fffc47;
        color: #666666;
      }
    </style>
  </head>
  <body>
    <form action="/form/submit" method="post">
      <input type="checkbox" id="box" />
      <label for="box">Click here</label>
    </form>
  </body>
</html>
Try it Yourself »

Result

<div class="demo mb-5 px-2.5 not-prose"> <form action-xhr="/form/submit" method="post" target="_top"> <input id="box" type="checkbox">``</input> <label for="box">Click here</label> </form> </div>In the example above, we applied the same value both to the <span class="attribute">id</span> attribute of the <input> tag and <span class="attribute">for</span> attribute of the <label> tag. The label appearance is restyled with the :checked pseudo-class.

Example of adding a click effect for resizing the image:

<!DOCTYPE html>
<html>
  <head>
    <style>
      #btnControl {
        display: none;
      }
      #btnControl:checked + label > img {
        width: 150px;
        height: 170px;
      }
    </style>
  </head>
  <body>
    <input type="checkbox" id="btnControl" />
    <label class="btn" for="btnControl">
      <img src="https://images.unsplash.com/photo-1565520651265-1148c3b277f4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" id="btnLeft" />
    </label>
  </body>
</html>
Try it Yourself »

Because a <label> triggers its associated checkbox, placing interactive elements like buttons inside it can cause unexpected behavior or accessibility issues. But you can add some CSS to change the appearance and behavior of the button.

Example of adding a click effect on the <input> tag:

<!DOCTYPE html>
<html>
  <head>
    <style>
      #btnControl {
        display: none;
      }
      .btn {
        width: 80px;
        height: 30px;
        background: #ffffff;
        border-radius: 7px;
        padding: 1px 3px;
        box-shadow: 1px 1px 1px #000000;
        display: block;
        text-align: center;
        background-image: linear-gradient(to bottom, #e8e8e8, #a1a1a1);
        font-family: arial;
        font-size: 14px;
        line-height: 30px;
      }
      .btn:hover {
        background-image: linear-gradient(to bottom, #97e8ae, #3be36b);
      }
      .btn:active {
        margin: 1px 1px 0;
        box-shadow: -1px -1px 1px #000;
        outline: 1px solid #000000;
        -moz-outline-radius: 7px;
        background-image: linear-gradient(to top, #97e8ae, #3be36b);
      }
      #btnControl:checked + label {
        width: 70px;
        height: 74px;
        line-height: 74px;
      }
    </style>
  </head>
  <body>
    <input type="checkbox" id="btnControl" />
    <label class="btn" for="btnControl">Click here</label>
  </body>
</html>
Try it Yourself »