<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fancy RPG buttons</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="columns">
<div class="c-1">
<button class="mmo-button fmb-red lg">RED LG</button>
<button class="mmo-button fmb-red">RED</button>
<button class="mmo-button fmb-red md">RED MD</button>
<button class="mmo-button fmb-red sm">RED SM</button>
<button class="mmo-button fmb-red xs">RED XS</button>
</div>
<div class="c-2">
<button class="mmo-button fmb-green lg">GREEN LG</button>
<button class="mmo-button fmb-green">GREEN</button>
<button class="mmo-button fmb-green md">GREEN MD</button>
<button class="mmo-button fmb-green sm">GREEN SM</button>
<button class="mmo-button fmb-green xs">GREEN XS</button>
</div>
<div class="c-3">
<button class="mmo-button fmb-blue lg">BLUE LG</button>
<button class="mmo-button fmb-blue">BLUE</button>
<button class="mmo-button fmb-blue md">BLUE MD</button>
<button class="mmo-button fmb-blue sm">BLUE SM</button>
<button class="mmo-button fmb-blue xs">BLUE XS</button>
</div>
<div class="c-4">
<button class="mmo-button fmb-orange lg">ORANGE LG</button>
<button class="mmo-button fmb-orange">ORANGE</button>
<button class="mmo-button fmb-orange md">ORANGE MD</button>
<button class="mmo-button fmb-orange sm">ORANGE SM</button>
<button class="mmo-button fmb-orange xs">ORANGE XS</button>
</div>
<div class="c-5">
<button class="mmo-button fmb-purple lg">PURPLE LG</button>
<button class="mmo-button fmb-purple">PURPLE</button>
<button class="mmo-button fmb-purple md">PURPLE MD</button>
<button class="mmo-button fmb-purple sm">PURPLE SM</button>
<button class="mmo-button fmb-purple xs">PURPLE XS</button>
</div>
</div>
<div style="position: fixed;bottom: 5%;right: 5%;">
<h5 style="margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid #856200;
color: #FFC107;
text-align: center;">Support my work</h5>
<div style="display: flex;align-items: center;">
<a class="mmo-button fmb-red" style="font-weight: bold; text-decoration: none!important; display: flex; align-items: center" href="https://ko-fi.com/mmltech" target="_blank">
<img src="https://storage.ko-fi.com/cdn/Kofi_Logo_Blue.svg" width="60px"/> <span style="margin-left: 1rem">Buy me a coffee</span>
</a>
</div>
</div>
</body>
</html>
body {
background: #000;
}
.columns {
display: flex;
}
.columns [class*=c-] {
padding: 1rem;
}
.columns [class*=c-] * {
display: block;
margin-bottom: 1rem;
}
.mmo-button {
font-family: "Open Sans", Arial, Helvetica, sans-serif;
text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, 0.8);
font-weight: 400;
-webkit-transition: 0.3s all;
-moz-transition: 0.3s all;
-ms-transition: 0.3s all;
-o-transition: 0.3s all;
transition: 0.3s all;
border-radius: 4px;
border: 1px solid;
border-color: #666 #444 #404040;
color: #f8b700;
text-align: center;
justify-content: center;
padding: 12px 10px;
font-size: 1rem;
}
.mmo-button.xs {
padding: 5px 8px;
font-size: 0.65rem;
}
.mmo-button.sm {
padding: 5px 10px;
font-size: 0.85rem;
}
.mmo-button.md {
padding: 10px;
font-size: 0.95rem;
}
.mmo-button.lg {
padding: 1rem 2rem;
font-size: 1rem;
}
.mmo-buttona {
display: block;
text-decoration: none !important;
}
.mmo-button:hover {
color: #fff;
}
.mmo-button.fmb-red {
background: #480000 0 0;
box-shadow: 0 0 5px #000, inset 0 0 2px 2px #000, inset -2px 4px 1px #972f2f, inset 0 -4px 1px #480000;
}
.mmo-button.fmb-red:hover {
box-shadow: 0 0 5px #000, inset 0 0 2px 2px #000, inset -2px 4px 1px #d32120, inset 0 -4px 1px #480000;
background-image: radial-gradient(#e23c3b, #480000 85%);
}
.mmo-button.fmb-green {
background: #205823 0 0;
border-color: #666 #444 #404040;
box-shadow: 0 0 5px #000, inset 0 0 2px 2px #000, inset -2px 4px 1px #4CAF50, inset 0 -4px 1px #225e25;
}
.mmo-button.fmb-green:hover {
box-shadow: 0 0 5px #000, inset 0 0 2px 2px #000, inset -2px 4px 1px #7acb4e, inset 0 -4px 1px #1b4b1e;
background-image: radial-gradient(#4CAF50, #225e25 85%);
}
.mmo-button.fmb-blue {
background: #3e5f81 0 0;
border-color: #666 #444 #404040;
box-shadow: 0 0 5px #000, inset 0 0 2px 2px #000, inset -2px 4px 1px #0087ec, inset 0 -4px 1px #3e5f81;
}
.mmo-button.fmb-blue:hover {
box-shadow: 0 0 5px #000, inset 0 0 2px 2px #000, inset -2px 4px 1px #00BCD4, inset 0 -4px 1px #3e5f81;
background-image: radial-gradient(#00BCD4, #3e5f81 85%);
}
.mmo-button.fmb-orange {
background: #856200 0 0;
border-color: #666 #444 #404040;
box-shadow: 0 0 5px #000, inset 0 0 2px 2px #000, inset -2px 4px 1px #c89400, inset 0 -4px 1px #856200;
}
.mmo-button.fmb-orange:hover {
box-shadow: 0 0 5px #000, inset 0 0 2px 2px #000, inset -2px 4px 1px #f5c46e, inset 0 -4px 1px #856200;
background-image: radial-gradient(#f5c46e, #856200 85%);
}
.mmo-button.fmb-purple {
background: #1f0b57 0 0;
border-color: #666 #444 #404040;
box-shadow: 0 0 5px #000, inset 0 0 2px 2px #000, inset -2px 4px 1px #39149f, inset 0 -4px 1px #1f0b57;
}
.mmo-button.fmb-purple:hover {
box-shadow: 0 0 5px #000, inset 0 0 2px 2px #000, inset -2px 4px 1px #4b1ad2, inset 0 -4px 1px #1f0b57;
background-image: radial-gradient(#4b1ad2, #1f0b57 85%);
}
/*# sourceMappingURL=style.css.map */
