buttons

its a bunch of buttons

by mrcrazypants987

HTML

<p id="thing">aaaaaaa</p>


<button class="button button1" onclick="pointer()">1</button>
<button class="button button2" onclick="crosshair()">2</button>
<button class="button button3" onclick="help()">3</button>
<button class="button button4" onclick="wait()">4</button>
<button class="button button5" onclick="allscroll()">5</button>
<button class="button button6" onclick="nodrop()">6</button>
<button class="button button7" onclick="copy()">7</button>

<script>
  function pointer() {
    document.getElementById("thing").style.cursor = "pointer";
  }

  function crosshair() {
    document.getElementById("thing").style.cursor = "crosshair";
  }

  function help() {
    document.getElementById("thing").style.cursor = "help";
  }



  function wait() {
    document.getElementById("thing").style.cursor = "wait";
  }


  function allscroll() {
    document.getElementById("thing").style.cursor = "all-scroll";
  }

  function nodrop() {
    document.getElementById("thing").style.cursor = "no-drop";
  }

  function copy() {
    document.getElementById("thing").style.cursor = "copy";
  }

</script>

CSS

.button1 {
  font-size: 35px;
  padding: 15px 16px;
  border-radius: 35%;
  outline: none;
  background-color: #ff1616;
}

.button2 {
  font-size: 35px;
  padding: 15px 16px;
  border-radius: 35%;
  outline: none;
  background-color: #0738bf;
}

.button3 {
  font-size: 35px;
  padding: 15px 16px;
  border-radius: 35%;
  outline: none;
  background-color: #f96509;
}

.button4 {
  font-size: 35px;
  padding: 15px 16px;
  border-radius: 35%;
  outline: none;
  background-color: #00c624;
}