A Pen by Anonasaurus Rex.

An-Anonymous-Pen.markdown

An Anonymous Pen

A Pen by A Non Ymous on CodePen.

License.

index.html

<h3>Desktop Notifications</h3>
<button class="notification">Notify me!</button>

script.js

$('.notification').click(function() {

  if (!("Notification" in window)) {
    alert("This browser does not support desktop notification");
  }

  else if (Notification.permission === "granted") {
  var notification = new Notification('A notification', {body: 'And a great one!', icon: 'http://placekitten.com/100/100'});
  } else {
    Notification.requestPermission(function (permission) {

      if(!('permission' in Notification)) {
        Notification.permission = permission;
      }
      if (permission === "granted") {
        var notification = new Notification('A notification', {body: 'And a great one!', icon: 'http://placekitten.com/100/100'});
      }
    });
  }
});

style.css

body {
  background: #f8f8f8;
}
button {
  margin: 100px auto ;
  display:block;
  position: relative;
  box-shadow: 
    1px 1px #53A7EA,
    2px 2px #53A7EA,
    3px 3px #53A7EA;
  transition: all 0.1s ease-in;
  border: none;
  padding: 10px;
  background: #08C;
  color: white;
  font-weight: bold;
  text-decoration: none;
  font-size: 18px;
  font-family: Arial;
  width: 150px;
  height: 75px;
}

button:active { 
  box-shadow: none;
  top: 3px;
  left: 3px;
}
h3 {
background: #555;
color: #fff;
text-shadow: 0 -1px 1px rgba(0,0,0,0.7);
padding: 13px 20px;
font-size: 22px;
  font-family: arial;
  text-align: center;
}