How to do this kind of Button in CSS?

Problem :

I've been searching the Internet for a while and found nothing, so I'm turning to you guys.

I was wondering how you can do a button like this with CSS (On/Off button example):

I already tried something like this :

HTML :

                <a class="button_tooltip" href="#">On</a>
                <a class="button_tooltip" href="#">Off</a>

CSS:

a {
    color: #76daff;
    display: inline-block;
    padding: 8px 16px;
    position: relative;
    text-decoration: none;
}
a {
    color: #76daff;
}
a.button_tooltip {
    background: #ccc none repeat scroll 0 0;
    color: black;
}
a.button_tooltip::after {
    border-top-color: #cccccc;
}
a.button_tooltip::after {
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #ccc;
    content: "";
    margin-left: -8px;
}
a.button_tooltip {
    background: #cccccc none repeat scroll 0 0;
    color: #000000;
}
a.button_tooltip::after {
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #ccc;
    content: "";
}
a.button_tooltip::after {
    border-top-color: #cccccc;
}

But only gave me the square without the little triangle underneath.

Solution :

This is easily possible with 2 elements and using a pseudo element to get the arrow bit underneath to show.

It doesn't take a great deal of HTML/CSS to complete and can easily be changed to work as an input or as an <a> tag. Whatever your requirements are.

$(document).ready(function() {
  $('.btn').click(function() {
    $('.btn').toggleClass('active');
  });
});

.container {
  width: 200px;
  height: 100px;
}
.btn {
  width: 100px;
  height: 100px;
  box-sizing: border-box;
  border: 1px solid blue;
  float: left;
  cursor: pointer;
}
.active {
  background: blue;
  position: relative;
}
.active:before {
  content: '';
  position: absolute;
  width: 50px;
  height: 50px;
  transform: rotate(45deg);
  bottom: -10px;
  left: 25px;
  background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="btn"></div>
  <div class="btn active"></div>
</div>