- #button{
font-size:1.1rem;
- width:200px;
height:60px;
- border:2px solid #df7813;
border-radius:20px/50px;
- background:#fff;
color:#df7813;
- }
#button:hover{
- background:#df7813;
color:#fff;
- transition:0.4s ease;
}
-
全部的Javascript代码如下：
- document.addEventListener('DOMContentLoaded',function(){
document.getElementById('button').addEventListener('click',function(){
- if(! ('Notification' in window) ){
alert('Sorry bro, your browser is not good enough to display notification');
- return;
}
- Notification.requestPermission(function(permission){
var config = {
- body:'Thanks for clicking that button. Hope you liked.',
icon:'https://cdn2.iconfinder.com/data/icons/ios-7-style-metro-ui-icons/512/MetroUI_HTML5.png',
- dir:'auto'
};
