<div class="wrapper">
  <div id="message" class="hide">
    You won't see this message until after you clicked the button. Click again to hide me!
  <div id="button">
    Click me!
  position: relative;
  top: 40vh;
  border: 5px solid #FFAB33;
  width: 200px;
  text-align: center;
  padding: 10px;
  font-size: 30px;
  cursor: pointer;
  margin: auto;
  background: #FF5733;

  background: #DFF30B;

  font-size: 26px;
  margin-bottom: 30px;
  text-align: center;

  visibility: hidden;

  visibility: visible;
let button = document.querySelector('#button');
let msg = document.querySelector('#message');

button.addEventListener('click', ()=>{
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.