<< HOME
L
D
Minecraft Button Generator
Check out the
work on Ao3
for more information. Text is hidden if it overflows past the button boundaries.
Editor
Button text:
Toggle Disable Workskin
-- Minecraft Button:
press me!
--
Click to copy HTML
<p class="mcbutton" align="center"> <samp class="screenreader" > -- Minecraft Button: </samp> press me! <samp class="screenreader" > --</samp> </p>
Click to copy CSS
.screenreader { position: absolute; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .mcbutton{ display: flex; background-image: url('https://images.squidge.org/images/2023/11/30/button.png'); background-color: grey; height: 9vw; width: 90vw; max-height: 1.3cm; max-width: 13cm; position: relative; background-repeat:no-repeat; background-size: 100% 100%; margin: 0 auto 0 auto; align-items: center; justify-content: center; overflow: hidden; text-align:center; color: white; line-height: 1; } .mcbutton hr{ display: none; } .mcbutton:hover{ background-image: url("https://images.squidge.org/images/2023/11/30/buttonpressed.png"); } .mcbutton>p{ font-family: "Verdana"; font-size: larger; font-stretch:extra-expanded; line-height: 1; margin: auto; }