<div class="example">
  <button id="button1">A basic message</button>
  <button id="button2">A title with a text under</button>
  <button id="button3">A success message!</button>
  <button id="button4">A warning message, with a function attached to the "Confirm"-button...</button>
  <button id="button5">... and by passing a parameter, you can execute something else for "Cancel".</button>
</div>
.example button {
  float: left;
  background-color: #4E3E55;
  color: white;
  border: none;
  box-shadow: none;
  font-size: 17px;
  font-weight: 500;
  font-weight: 600;
  border-radius: 3px;
  padding: 20px 80px;
  margin: 26px 5px 0 5px;
  cursor: pointer; 
}
.example button:focus{
  outline: none; 
}
.example button:hover{
  background-color: #4E3E5590; 
}
.example button:active{
  background-color: #8E3E55; 
}
document.getElementById('button1').onclick = function(){
	swal("Hello World!");
};

document.getElementById('button2').onclick = function(){
	swal("Hello World!", "Again...")
};

document.getElementById('button3').onclick = function(){
	swal("Nice job!", "You clicked the button!", "success");
};

document.getElementById('button4').onclick = function(){
	swal({
		title: "Are you sure?",
		text: "You will not be able to recover this imaginary file!",
		type: "warning",
		showCancelButton: true,
		confirmButtonColor: '#DD6B55',
		confirmButtonText: 'Yes, delete it!',
		closeOnConfirm: false,
		//closeOnCancel: false
	},
	function(){
		swal("Deleted!", "Your imaginary file has been deleted!", "success");
	});
};

document.getElementById('button5').onclick = function(){
	swal({
		title: "Are you sure?",
		text: "You will not be able to recover this imaginary file!",
		type: "warning",
		showCancelButton: true,
		confirmButtonColor: '#DD6B55',
		confirmButtonText: 'Yes, delete it!',
		cancelButtonText: "No, cancel please!",
		closeOnConfirm: false,
		closeOnCancel: false
	},
	function(isConfirm){
    if (isConfirm){
      swal("Deleted!", "Your imaginary file has been deleted!", "success");
    } else {
      swal("Cancelled", "Your imaginary file is safe :)", "error");
    }
	});
};

External CSS

  1. https://cdn.rawgit.com/t4t5/sweetalert/v0.2.0/lib/sweet-alert.css

External JavaScript

  1. https://cdn.rawgit.com/t4t5/sweetalert/v0.2.0/lib/sweet-alert.min.js