Home  >  Article  >  Web Front-end  >  How to Create a Toggle Button with a Push-In and Pop-Out Effect Using HTML and CSS?

How to Create a Toggle Button with a Push-In and Pop-Out Effect Using HTML and CSS?

DDD
DDDOriginal
2024-10-31 09:02:01434browse

How to Create a Toggle Button with a Push-In and Pop-Out Effect Using HTML and CSS?

Creating a Toggle Button in HTML and CSS

Question:

How can I create a toggle button in HTML using CSS that remains pushed in when clicked and pops out when clicked again?

Answer:

Implementing a pure CSS solution for a functional toggle button is challenging. An alternative approach is to utilize a checkbox styled using CSS and supplemented with JavaScript.

jQuery Implementation:

The recommended solution involves a simple jQuery function and two background images to denote the different button states. Here's an example:

<code class="javascript">$(document).ready(function() {
  $('a#button').click(function() {
    $(this).toggleClass("down");
  });
});</code>
<code class="css">a {
  background: #ccc;
  cursor: pointer;
  border-top: solid 2px #eaeaea;
  border-left: solid 2px #eaeaea;
  border-bottom: solid 2px #777;
  border-right: solid 2px #777;
  padding: 5px 5px;
}

a.down {
  background: #bbb;
  border-top: solid 2px #777;
  border-left: solid 2px #777;
  border-bottom: solid 2px #eaeaea;
  border-right: solid 2px #eaeaea;
}</code>
<code class="html"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="button" title="button">Press Me</a></code>

The above is the detailed content of How to Create a Toggle Button with a Push-In and Pop-Out Effect Using HTML and CSS?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn