"MMORPG inspire pure CSS buttons"
Bootstrap 4.1.1 Snippet by MMLTech

<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 */

Related: See More


Questions / Comments: