How to Create: Alert Buttons
Sample Code: Create Alert Buttons
<!DOCTYPE html>
<html>
<head>
<style>
.btn { border: black; color: yellow; padding: 12px 24px; font-size: 18px; cursor: pointer; border-radius: 4px; }
.suc {background-color: green;}
.suc:hover {opacity: 0.7;}
.inf {background-color: blue;}
.inf:hover {opacity: 0.7;}
.war {background-color: orange;}
.war:hover {opacity: 0.7;}
.dan {background-color: red;}
.dan:hover {opacity: 0.7;}
.def {background-color: gray; color: orange;}
.def:hover {opacity: 0.7;}
</style>
</head>
<body oncontextmenu="return false;">
<h2>How to Create: Alert Buttons</h2>
<button class="btn def">Default</button>
<button class="btn inf">Info</button>
<button class="btn dan">Danger</button>
<button class="btn suc">Success</button>
<button class="btn war">Warning</button>
</body>
</html>
<html>
<head>
<style>
.btn { border: black; color: yellow; padding: 12px 24px; font-size: 18px; cursor: pointer; border-radius: 4px; }
.suc {background-color: green;}
.suc:hover {opacity: 0.7;}
.inf {background-color: blue;}
.inf:hover {opacity: 0.7;}
.war {background-color: orange;}
.war:hover {opacity: 0.7;}
.dan {background-color: red;}
.dan:hover {opacity: 0.7;}
.def {background-color: gray; color: orange;}
.def:hover {opacity: 0.7;}
</style>
</head>
<body oncontextmenu="return false;">
<h2>How to Create: Alert Buttons</h2>
<button class="btn def">Default</button>
<button class="btn inf">Info</button>
<button class="btn dan">Danger</button>
<button class="btn suc">Success</button>
<button class="btn war">Warning</button>
</body>
</html>
