<button class="first">Title Only</button>
<button class="second">Title and Text</button>
<button class="third">Title, Text and Icon</button>
body {
  margin: 20px auto;
  font-family: 'Lato';
  font-weight: 300;
  width: 600px;
  text-align: center;

button {
  background: cornflowerblue;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 8px;
  font-family: 'Lato';
  margin: 5px;
  text-transform: uppercase;
  cursor: pointer;
  outline: none;

button:hover {
  background: orange;
document.querySelector(".first").addEventListener('click', function(){
  swal("Our First Alert");

document.querySelector(".second").addEventListener('click', function(){
  swal("Our First Alert", "With some body text!");

document.querySelector(".third").addEventListener('click', function(){
  swal("Our First Alert", "With some body text and success icon!", "success");