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! --

.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;
}