Html Question posted in
Some basic documentation can be found here.

Html – Can I make a button that reveals 2 more clickable buttons?

I’ve been going absolutely insane for the lat 4h trying to learn. I’m so new to this pls help / be kind.

I’m making a website with VSCode. So, I want to make a button that when you click two more buttons appear – then each of them lead to diferent pages when clicked! I just can’t figure out how.

It should be a button with this text:

Do you enter?

(click button. then these 2 buttons appear:)

YES NO

I’ve tried to tinker with this one that I found online:

https://www.quora.com/How-can-a-button-reveal-another-button-when-hovered-over-using-CSS

  <div class="button-container">
          <button class="main-button">Hover Me</button>
          <button class="reveal-button">Revealed Button</button>
        </div>

CSS:

.reveal-button {display: none; /* Initially hide the revealed button */  }.main-button:hover + .reveal-button { display: inline block; /* Display the revealed button when main button is hovered */  }

But I can’t find a way to make it be "click" instead of "hover" even when I change to ":focus". And with this method I can only make 1 button appear after the first, instead of 2.

Is my request impossible to make? Or am I just unware of the answer?

Tags:

3

Answers


  1. 0

    You can achieve something similar to this, but I definitely think you need to use JavaScript for a more logical and efficient solution.

    button {
  margin-bottom: 10px;
  display: block;
}

.button-hidden {
  display: none;
}
.main-button:hover ~ .hover-button {
  display: block;
}
.main-button:active ~ .active-button {
  display: block;
}
.main-button:focus ~ .focus-button {
  display: block;
}
    <div class="button-container">
  <button class="main-button">Hover Me</button>
  <button class="button-hidden hover-button">Show on hover</button>
  <button class="button-hidden active-button">Show on active</button>
  <button class="button-hidden focus-button">Show on focus</button>
</div>
    Login or Signup to reply.
  2. 0

    Try this method. Use JavaScript to change CSS:display of buttons.

    let st=true;
function toggleDisplay(){
document.querySelectorAll('.toggleBTN').forEach(function(item){
if(st){item.style.display="inline-block";}
else{item.style.display="none";}
})
st=!st;
}

function gotoURL(strURL){
window.location.href = strURL; // possible to use the "back" button to previous page.
//window.location.replace(strURL); // is not possible to use the "back" button.
}
    .toggleBTN{display:none;}
    <button class="mainBTN" onclick="toggleDisplay();">click button</button>
<button class="toggleBTN" onclick="gotoURL('https://www.website1.com');">yes</button>
<button class="toggleBTN" onclick="gotoURL('https://www.website2.com');">no</button>
    Login or Signup to reply.
  3. 0

    There are a couple of approaches using only HTML and CSS as follows, with explanatory comments in the code:

    *,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  block-size: 100dvb;
  padding: 1rem;
}

main {
  block-size: 100%;
  border: 1px solid;
  padding: 0.5rem;
}

/* We're hiding the element visually with the opacity property,
   and preventing the element, and descendants, from appearing
   in the tab order while hidden: */
.choices {
  opacity: 0;
  transition: opacity 0.5s linear;
  visibility: hidden;
}

/* any .choices element that's a later sibling of a <label> element
   that has a checked <input> with a data-role attribute equal to
   "confirmation" will be styled to be visible (opacity: 1), and
   able to participate in the tab-order (visibility: visible): */
label:has(input[data-role="confirmation"]:checked) ~ .choices {
  opacity: 1;
  visibility: visible;
}

/* the :popover-open pseudo-class styles popover elements
   that are currently displayed: */
div:popover-open {
  border-radius: 0.4em;
  display: flex;
  gap: 1em;
  inset: 50%;
  padding: 0.5em 1em;
  margin: auto;
}

/* styles the 'overlay' of the popover that reduces visibility
   of the underlying content: */
::backdrop {
  background: hsl(0deg 0% 0% / 0.5);
  backdrop-filter: blur(2px);
}
    <!-- wrapping the page content  -->
<main>
  <!-- the 'container' elements are generic wrappers, and not required;
       though if you adjust the HTML structure - and therefore change
       the DOM - you may need to adjust the CSS selectors to reflect
       those changes: -->  
  <div class="confirmation-1">
    <!-- I habitually, mostly for styling reasons, wrap the text of a <label>
         element with a span, as follows, this is not required though: -->
    <label>
      <span class="labelText">Are you sure?</span>
      <!-- the custom data-role attribute is used in place of class,
           purely in order to easily select the element for use in the
           :has() pseudo-class: -->
      <input data-role="confirmation" type="checkbox" />
    </label>
    <!-- this element is hidden via CSS on page-load: -->
    <div class="choices">
      <!-- the various options, to be replaced with whatever you wish: -->
      <a href="#yes">Yes</a>
      <a href="#nope">No</a>
    </div>
  </div>
  
  <div class="confirmation-2">
    <!-- we're using the "popovertarget" attribute, with its value set to
    the 'id' of the element to be used as a popover: --> 
    <button popovertarget="verify">Are you sure?</button>
    <!-- the popover Boolean attribute (doesn't need a value, it only
         has to be present, or not) sets this element to act as a popover,
         note that the id is equal to the popovertarget of the <button>: -->
    <div popover id="verify">
      <a href="#yes">Yes</a>
      <a href="#nope">No</a>
    </div>
  </div>
</main>

    References:

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search