You have a choice...

by MegaScience

HTML

<h1>Choose wisely...</h1>

<div id="buttons">
  <a href="#eat">
    <button type="button">Eat the Beans</button>
  </a>
  <a href="#dont">
    <button type="button">Don't eat the Beans</button>
  </a>
</div>

<div id="eat" class="box">Great, now you got the toots.</div>
<div id="dont" class="box">Good choice. You gain 20 friends.</div>

CSS

body {
  text-align: center;
}

.box {
  display: none;
  padding: 0.2em;
  margin-top: 5px;
  background-color: red;
  border: 2px solid #D4D4D4;
  font-weight: bold;
  -webkit-text-stroke: 1px white;
  text-shadow: -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px 1px 0 #FFF;
}

#buttons {
  display: flex;
  justify-content: space-around;
}

#buttons button {
  width: 15vw;
  min-width: 5em;
  height: 15vw;
  min-height: 5em;
}

:target {
  display: block;
}

#dont {
  background-color: green;
}