Mode Buttons

CSS file name: styles/buttons.scss

Mini

<button class="gamemode small">
  <span style="
  color: #885ABC; 
  border-color: #885ABC
  ">Creative</span>
</button>

Icon only

<button class="gamemode">
  <img 
    class="mode-icon" 
    style="background: #885ABC;" 
    src="/images/Block_Green_Stained_Glass.png" 
  />
</button>

Big

<button class="gamemode">
  <div class="big">
    <span>Creative</span>
    <img 
      class="mode-icon" 
      style="background: #885ABC;" 
      src="/images/Block_Green_Stained_Glass.png" 
    />
  </div>
</button>

Mode announcement

<button class="gamemode flare">
  <div class="big">
    <span>Creative</span>
    <img 
      class="mode-icon" 
      style="background: #885ABC;" 
      src="/images/Block_Green_Stained_Glass.png" 
    />
  </div>
  <div class="announcement"><span>Już wkrótce</span></div>
</button>

Mode beta phase

<button class="gamemode flare">
  <div class="big">
    <span>Creative</span>
    <img 
      class="mode-icon" 
      style="background: #885ABC;" 
      src="/images/Block_Green_Stained_Glass.png" 
    />
  </div>
  <div class="announcement"><span>Już wkrótce</span></div>
</button>

Container for small mode

.mode-button-container{
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex: 0 1;
  flex-wrap: wrap;
  gap: 20px;
}

<div class="mode-buttons-container choosing">
  <!-- Dowolony mały przycisk trybu -->
</div>

Selected button

Class name: selected

<button class="gamemode small selected">
  <span style="color: #885ABC; border-color: #885ABC">Creative</span>
</button>