FAQ
  

CSS pro head 
/* === FAQ === */




.faq{
  width: 100%;
}




/* Jedna položka */
.faq-item{
  margin: 0 0 12px 0;
  border: 1px solid #6b34c5;
  border-radius: 4px;
  background: #ffffff;
  overflow: hidden;
}




/* Klikací hlavička (summary) */
.faq-item > summary{
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 14px 16px;
  font: inherit;
  color: #24242e;
  background: #f7f2fc;
  border-bottom: 1px solid rgba(107,52,197,0);
  transition: background-color .15s ease;
}




/* Skrytí markeru v Safari/Chromu */
.faq-item > summary::-webkit-details-marker{
  display: none;
}




/* Text otázky */
.faq-q{
  font: inherit;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.35;
  flex: 1 1 auto;
  min-width: 0;
}




/* Ikona vlevo */
.faq-icon{
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #6b34c5;
  color: #4e2d78;
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
}




/* SVG chevron */
.faq-chevron{
  width: 16px;
  height: 16px;
  display: block;
}




/* Odpověď */
.faq-a{
  padding: 14px 16px 16px 16px;
  font: inherit;
  color: #24242e;
  line-height: 1.55;
  background: #ffffff;
}




/* Odkazy uvnitř odpovědi */
.faq-a a{
  color: #61309a;
  text-decoration: underline;
  text-underline-offset: 2px;
}




.faq-a a:hover{
  color: #4f2780;
}




/* Stav otevřeno */
.faq-item[open] > summary{
  background: #f3ebfb;
  border-bottom-color: rgba(107,52,197,.35);
}




/* Otevřeno: šipka se otočí nahoru */
.faq-item[open] .faq-icon{
  transform: rotate(180deg);
  background: #fbf8fe;
  border-color: #6b34c5;
}




/* Hover */
.faq-item > summary:hover{
  background: #ede2f8;
}




/* Focus pro klávesnici */
.faq-item > summary:focus-visible{
  outline: 3px solid rgba(107,52,197,.22);
  outline-offset: 2px;
}




/* Mobil */
@media (max-width: 640px){
  .faq-item > summary{
    padding: 12px 14px;
    gap: 10px;
  }




  .faq-a{
    padding: 12px 14px 14px 14px;
  }




  .faq-q{
    font-size: 14px;
  }
}


HTML
<h2>FAQ</h2>
<div class="faq"><details class="faq-item"> <summary> <span class="faq-icon" aria-hidden="true"> <svg class="faq-chevron" viewbox="0 0 24 24" focusable="false" aria-hidden="true"> <path d="M7 10l5 5 5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </span> <span class="faq-q">Bolí tetování?</span> </summary>
<div class="faq-a">Ano, <strong>tetování může bolet</strong>, ale intenzita závisí na konkrétním místě na těle, velikosti motivu i individuálním prahu bolesti. Citlivější bývají například žebra, krk, prsty nebo kotníky, zatímco lépe se tetování snáší na rameni, předloktí nebo stehně. Ve většině případů je nepříjemný pocit zvládnutelný a během sezení si na něj tělo postupně zvyká.</div>
</details> <details class="faq-item"> <summary> <span class="faq-icon" aria-hidden="true"> <svg class="faq-chevron" viewbox="0 0 24 24" focusable="false" aria-hidden="true"> <path d="M7 10l5 5 5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </span> <span class="faq-q">Jak pečovat o čerstvé tetování?</span> </summary>
<div class="faq-a">Správná péče je zásadní pro <strong>hojení tetování</strong> i pro výsledný vzhled motivu. Po aplikaci je potřeba dodržovat pokyny tatéra, tetování udržovat v čistotě, jemně ho omývat a pravidelně mazat doporučeným krémem. Během hojení je vhodné vyhnout se koupání, sauně, bazénu, přímému slunci i mechanickému dráždění pokožky. Důležité je také nestrhávat stroupky a nechat kůži hojit přirozeně.</div>
</details> <details class="faq-item"> <summary> <span class="faq-icon" aria-hidden="true"> <svg class="faq-chevron" viewbox="0 0 24 24" focusable="false" aria-hidden="true"> <path d="M7 10l5 5 5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </span> <span class="faq-q">Jak dlouho se tetování hojí?</span> </summary>
<div class="faq-a">Povrchové hojení obvykle trvá přibližně <strong>2 až 3 týdny</strong>, ale kompletní regenerace kůže může zabrat i několik týdnů navíc. Délka hojení závisí na velikosti tetování, umístění, typu pokožky i následné péči. Během prvních dnů je běžné lehké zarudnutí, citlivost nebo olupování kůže. Pokud je péče správná, tetování se zahojí rovnoměrně a barvy i linky zůstanou pěkně čitelné.</div>
</details> <details class="faq-item"> <summary> <span class="faq-icon" aria-hidden="true"> <svg class="faq-chevron" viewbox="0 0 24 24" focusable="false" aria-hidden="true"> <path d="M7 10l5 5 5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </span> <span class="faq-q">Jak vybrat správný styl tetování?</span> </summary>
<div class="faq-a">Při výběru je dobré zohlednit <strong>motiv, velikost, umístění i osobní vkus</strong>. Jemné symboly a nápisy často dobře fungují v minimalistickém nebo fine line stylu, zatímco portréty, zvířata nebo propracované kompozice si říkají o realistické tetování. Výrazné ornamenty, geometrie a větší tmavé plochy naopak dobře vyniknou v blackworku. Důležité je vybírat styl nejen podle trendů, ale hlavně podle toho, co bude dlouhodobě sedět nositeli i konkrétní části těla.</div>
</details> <details class="faq-item"> <summary> <span class="faq-icon" aria-hidden="true"> <svg class="faq-chevron" viewbox="0 0 24 24" focusable="false" aria-hidden="true"> <path d="M7 10l5 5 5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </span> <span class="faq-q">Může tetování časem vyblednout?</span> </summary>
<div class="faq-a">Ano, <strong>tetování může postupně ztrácet sytost</strong>, což je přirozený proces. Na výsledný vzhled má vliv sluneční záření, kvalita pigmentu, typ pokožky i péče po zahojení. Jemné linky a velmi drobné detaily mohou časem působit méně ostře než výraznější motivy. Dlouhodobě pomáhá ochrana před sluncem, hydratace pokožky a v některých případech také pozdější refresh nebo přetetování.</div>
</details></div>
<p>&nbsp;</p>




Průvodce výběrem
  





  





CSS pro head 
/* ============================================
   PRŮVODCE VÝBĚREM – shop.tetovani.cz
   Civilní styl: bílá karta, střídmé fialové akcenty
   Bez JS – využívá native <details>/<summary>
============================================ */


.kat-pruvodce {
  font-family: inherit;
  background: #ffffff;
  border: 1px solid #ebe5f5;
  border-radius: 12px;
  margin: 1.5rem 0;
  overflow: hidden;
  box-sizing: border-box;
}


/* Hlavička (tlačítko pro rozbalení) */
.kat-pruvodce__hlavicka {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #ffffff;
  padding: 1.125rem 1.5rem;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  list-style: none;
  user-select: none;
  transition: background 0.15s ease;
}


/* Skrytí defaultní trojúhelníkové značky u summary */
.kat-pruvodce__hlavicka::-webkit-details-marker {
  display: none;
}
.kat-pruvodce__hlavicka::marker {
  display: none;
}


.kat-pruvodce__hlavicka:hover {
  background: #faf7fc;
}


/* Když je průvodce otevřený – oddělovací čára pod hlavičkou */
.kat-pruvodce[open] .kat-pruvodce__hlavicka {
  border-bottom: 1px solid #ebe5f5;
}


.kat-pruvodce__titulek {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
}


/* Šipka vpravo */
.kat-pruvodce__ikona {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9L12 15L18 9' stroke='%236b4fc4' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.25s ease;
}


.kat-pruvodce[open] .kat-pruvodce__ikona {
  transform: rotate(180deg);
}


/* Obsah (rozbalovací) */
.kat-pruvodce__obsah {
  padding: 1.5rem;
}


/* Seznam kroků */
.kat-pruvodce__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}


/* Jednotlivý krok */
.kat-krok {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}


.kat-krok__index {
  flex-shrink: 0;
}


.kat-krok__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f1ebf7;
  color: #6b4fc4;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}


.kat-krok__body {
  flex: 1;
  min-width: 0;
}


.kat-krok__topline {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 0.5rem 0;
}


.kat-krok__heading {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  line-height: 1.35;
}


.kat-krok__tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: #6b4fc4;
  background: #f1ebf7;
  padding: 3px 10px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}


.kat-krok__text {
  margin: 0 0 0.75rem 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: #374151;
}


.kat-krok__text:last-child {
  margin-bottom: 0;
}


/* Tip rámeček */
.kat-tip {
  background: #faf7fc;
  border-left: 3px solid #6b4fc4;
  padding: 0.75rem 1rem;
  border-radius: 0 6px 6px 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: #374151;
  margin: 0.75rem 0 0 0;
}


.kat-tip::before {
  content: "TIP → ";
  font-weight: 700;
  color: #2d1b5e;
}


/* Tabulka */
.kat-pruvodce__tabulka-wrapper {
  overflow-x: auto;
  margin: 0.75rem 0 0 0;
  border: 1px solid #ebe5f5;
  border-radius: 8px;
}


.kat-pruvodce__tabulka {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}


.kat-pruvodce__tabulka thead {
  background: #faf7fc;
}


.kat-pruvodce__tabulka th {
  text-align: left;
  padding: 10px 12px;
  font-weight: 600;
  color: #2d1b5e;
  border-bottom: 1px solid #ebe5f5;
  white-space: nowrap;
}


.kat-pruvodce__tabulka td {
  padding: 10px 12px;
  color: #374151;
  border-bottom: 1px solid #f1f1f4;
  line-height: 1.45;
}


.kat-pruvodce__tabulka tbody tr:last-child td {
  border-bottom: none;
}


/* ============================================
   RESPONZIVITA
   ============================================ */


@media (max-width: 760px) {
  .kat-pruvodce__hlavicka {
    padding: 1rem 1.125rem;
  }
  .kat-pruvodce__titulek {
    font-size: 15px;
    gap: 10px;
  }
  .kat-pruvodce__obsah {
    padding: 1.125rem;
  }
  .kat-krok {
    gap: 0.75rem;
  }
  .kat-krok__badge {
    width: 30px;
    height: 30px;
    font-size: 13px;
  }
  .kat-krok__heading {
    font-size: 15px;
  }
  .kat-krok__text {
    font-size: 14px;
  }
  .kat-pruvodce__tabulka {
    font-size: 13px;
  }
}


@media (max-width: 480px) {
  .kat-pruvodce {
    border-radius: 8px;
  }
  .kat-pruvodce__titulek {
    font-size: 14px;
  }
  .kat-krok__topline {
    gap: 8px;
  }
  .kat-krok__tag {
    font-size: 10px;
    padding: 2px 8px;
  }
}




HTML
<!-- ============= PRŮVODCE VÝBĚREM ============= -->
<details class="kat-pruvodce" aria-label="Průvodce výběrem tetovacího strojku">
  <summary class="kat-pruvodce__hlavicka">
    <span class="kat-pruvodce__titulek">
      Průvodce výběrem — Jak vybrat tetovací strojek
    </span>
    <span class="kat-pruvodce__ikona" aria-hidden="true"></span>
  </summary>


  <div class="kat-pruvodce__obsah">


    <ol class="kat-pruvodce__list">


      <li class="kat-krok">
        <div class="kat-krok__index">
          <div class="kat-krok__badge">1</div>
        </div>
        <div class="kat-krok__body">
          <div class="kat-krok__topline">
            <h3 class="kat-krok__heading">Určete si svou úroveň zkušenosti</h3>
            <span class="kat-krok__tag">Začátek</span>
          </div>
          <p class="kat-krok__text">Jiný strojek si vybere začátečník a jiný profesionál s desetiletou praxí. Začátečníkům doporučujeme rotační bezdrátový strojek — odpouští chyby, je tichý, intuitivní a nepotřebuje další vybavení. Profesionálové investují do prémiových značek jako FK Irons, Cheyenne nebo Bishop.</p>
          <p class="kat-tip">První strojek by neměl být ten nejlevnější ani nejdražší. Ideální vstupní volba je kvalitní rotační strojek v cenovém rozmezí 3 000–7 000 Kč.</p>
        </div>
      </li>


      <li class="kat-krok">
        <div class="kat-krok__index">
          <div class="kat-krok__badge">2</div>
        </div>
        <div class="kat-krok__body">
          <div class="kat-krok__topline">
            <h3 class="kat-krok__heading">Zvolte typ strojku podle techniky</h3>
            <span class="kat-krok__tag">Typ</span>
          </div>
          <p class="kat-krok__text">Každý typ strojku má své silné stránky a hodí se pro jiný styl práce. Rotační strojky jsou univerzální a tiché, cívkové klasické a silné, tužkové (pen) ergonomické pro dlouhé seance a bezdrátové ideální pro mobilní práci.</p>
          <div class="kat-pruvodce__tabulka-wrapper">
            <table class="kat-pruvodce__tabulka">
              <thead>
                <tr>
                  <th>Typ strojku</th>
                  <th>Vhodné pro</th>
                  <th>Charakteristika</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>Rotační</td>
                  <td>Linkování i stínování</td>
                  <td>Tichý chod, nízká hmotnost</td>
                </tr>
                <tr>
                  <td>Cívkový</td>
                  <td>Precizní linky</td>
                  <td>Silný úder, klasický feel</td>
                </tr>
                <tr>
                  <td>Tužkový (pen)</td>
                  <td>Realismus, detaily</td>
                  <td>Ergonomický tvar jako fix</td>
                </tr>
                <tr>
                  <td>Bezdrátový</td>
                  <td>Mobilní práce, konvence</td>
                  <td>Bez kabelů, baterie</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </li>


      <li class="kat-krok">
        <div class="kat-krok__index">
          <div class="kat-krok__badge">3</div>
        </div>
        <div class="kat-krok__body">
          <div class="kat-krok__topline">
            <h3 class="kat-krok__heading">Vyberte správný stroke (zdvih)</h3>
            <span class="kat-krok__tag">Parametry</span>
          </div>
          <p class="kat-krok__text">Stroke určuje, jak hluboko jehla proniká a jak agresivně strojek pracuje. Jde o klíčový parametr, který ovlivní výsledek vaší práce víc než samotná značka strojku.</p>
          <div class="kat-pruvodce__tabulka-wrapper">
            <table class="kat-pruvodce__tabulka">
              <thead>
                <tr>
                  <th>Stroke</th>
                  <th>Vhodné pro</th>
                  <th>Styl práce</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>2,5–3,0 mm</td>
                  <td>Jemné linkování, detaily</td>
                  <td>Fine line, drobné motivy</td>
                </tr>
                <tr>
                  <td>3,5 mm</td>
                  <td>Univerzální použití</td>
                  <td>Linkování i stínování</td>
                </tr>
                <tr>
                  <td>4,0 mm a víc</td>
                  <td>Stínování, color packing</td>
                  <td>Realismus, blackwork</td>
                </tr>
              </tbody>
            </table>
          </div>
          <p class="kat-tip">Pokud chcete jeden strojek na všechno, vyberte stroke 3,5 mm nebo model s nastavitelným stroke (například Spektra Xion).</p>
        </div>
      </li>


      <li class="kat-krok">
        <div class="kat-krok__index">
          <div class="kat-krok__badge">4</div>
        </div>
        <div class="kat-krok__body">
          <div class="kat-krok__topline">
            <h3 class="kat-krok__heading">Zvolte důvěryhodnou značku</h3>
            <span class="kat-krok__tag">Značky</span>
          </div>
          <p class="kat-krok__text">Na trhu jsou značky, které prošly zkouškou tisíců tatérů po celém světě. FK Irons a Cheyenne patří mezi absolutní špičku — strojky na celý život v odpovídající cenové hladině. Spektra (Bishop) je oblíbená pro realismus a stínování, Inkjecta vyniká kvalitou a ergonomií. Dragonhawk Mast nabízí výborný poměr cena/výkon — ideální volba pro začátečníky i pokročilé, kteří chtějí kvalitní strojek bez astronomické ceny.</p>
        </div>
      </li>


      <li class="kat-krok">
        <div class="kat-krok__index">
          <div class="kat-krok__badge">5</div>
        </div>
        <div class="kat-krok__body">
          <div class="kat-krok__topline">
            <h3 class="kat-krok__heading">Nezapomeňte na příslušenství</h3>
            <span class="kat-krok__tag">Vybavení</span>
          </div>
          <p class="kat-krok__text">Ke strojku budete potřebovat i další vybavení: napájecí zdroj (pokud si nevyberete bezdrátový model), cartridge nebo jehly kompatibilní s vaším strojkem, gripy pro komfortní držení a samozřejmě barvy, hygienické potřeby a obtiskovací pomůcky. Pro začátečníky je často výhodnější pořídit si kompletní tetovací sadu, kde je vše sladěné a připravené k použití.</p>
        </div>
      </li>


    </ol>
  </div>
</details>






Trust box
  

CCS pro head


/* ============================================
   TRUST BOX – shop.tetovani.cz
   Použití: vložte .trust-box-wrap do stránky
   Brand: fialová (💜)
============================================ */
.trust-box-wrap {
  font-family: inherit;
  width: 100%;
  padding: 1.5rem 1.75rem;
  background: #f8f5fb;
  border-radius: 10px;
  box-sizing: border-box;
}
.trust-box-text {
  font-size: 14px;
  line-height: 1.75;
  color: #2d1b5e;
  margin: 0 0 1.5rem;
}
.trust-box-text strong {
  font-weight: 700;
  color: #1a0f3d;
}
.trust-box-usps {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-top: 1px solid #ebe5f5;
  padding-top: 1.25rem;
}
.trust-box-usp {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 8px;
  gap: 10px;
}
/* Čáry pouze na desktopu */
.trust-box-usp + .trust-box-usp {
  border-left: 1px solid #ebe5f5;
}
.trust-box-usp-icon {
  font-size: 24px;
  line-height: 1;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.trust-box-usp-label {
  font-size: 12px;
  font-weight: 500;
  color: #2d1b5e;
  line-height: 1.4;
}
/* Tablet – 3 sloupce, bez čar */
@media (max-width: 760px) {
  .trust-box-usps {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 1.5rem;
  }
  .trust-box-usp + .trust-box-usp {
    border-left: none;
  }
}
/* Mobil – 2 sloupce, bez čar */
@media (max-width: 480px) {
  .trust-box-wrap {
    padding: 1.25rem;
    border-radius: 8px;
  }
  .trust-box-text {
    font-size: 13px;
  }
  .trust-box-usps {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 1.5rem;
  }
  .trust-box-usp + .trust-box-usp {
    border-left: none;
  }
  .trust-box-usp-icon {
    font-size: 20px;
    height: 30px;
  }
  .trust-box-usp-label {
    font-size: 11.5px;
  }
}
HTML


<div class="trust-box-wrap">
  <p class="trust-box-text">
    <strong>TETOVANI.cz</strong> je specializovaný český e-shop zaměřený na <strong>vybavení pro tatéry a tetovací studia</strong>. V nabídce najdete stovky prověřených produktů od špičkových značek jako <strong>Kwadron, Dynamic, World Famous, Dragonhawk</strong> či <strong>FK Irons</strong> — tetovací strojky, barvy, jehly, cartridge, hygienické potřeby i kompletní vybavení studia. Zásilky přijaté <strong>do 13:00 odesíláme ještě tentýž den</strong>, při nákupu nad 2&nbsp;000 Kč máte <strong>dopravu zdarma</strong>. Nabízíme také <strong>osobní vyzvednutí na prodejně v Praze</strong>. S výběrem vám rádi poradíme na telefonu i e-mailu.
  </p>
  <div class="trust-box-usps">


    <div class="trust-box-usp">
      <div class="trust-box-usp-icon">🚚</div>
      <span class="trust-box-usp-label">Doprava zdarma<br>nad 2 000 Kč</span>
    </div>


    <div class="trust-box-usp">
      <div class="trust-box-usp-icon">⚡</div>
      <span class="trust-box-usp-label">Expedice<br>ještě dnes</span>
    </div>


    <div class="trust-box-usp">
      <div class="trust-box-usp-icon">🏬</div>
      <span class="trust-box-usp-label">Prodejna<br>v Praze</span>
    </div>


    <div class="trust-box-usp">
      <div class="trust-box-usp-icon">🎨</div>
      <span class="trust-box-usp-label">Špičkové značky<br>v oboru</span>
    </div>


    <div class="trust-box-usp">
      <div class="trust-box-usp-icon">☎️</div>
      <span class="trust-box-usp-label">Odborná<br>poradna</span>
    </div>


    <div class="trust-box-usp">
      <div class="trust-box-usp-icon">✅</div>
      <span class="trust-box-usp-label">Ověřené<br>produkty</span>
    </div>


  </div>
</div>


Mini buttony
  

CSS pro head
/* === MINI BUTTONY === */
.mini-buttons {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
a.mini-button,
a.mini-button:link,
a.mini-button:visited,
a.mini-button:active {
display: inline-block;
padding: 8px 14px;
background: #f8f8f8;
color: inherit !important;
border: 1px solid #61309a;
border-radius: 999px;
text-decoration: none !important;
font: inherit;
line-height: 1.2;
box-sizing: border-box;
transition: background-color 0.2s ease, border-color 0.2s ease;
}
a.mini-button:hover,
a.mini-button:focus,
a.mini-button:focus-visible {
background: #e3e6f2;
border-color: #61309a;
text-decoration: none !important;
outline: none;
}


HTML


<h2>Mini buttony</h2>
<div class="mini-buttons"><a href="#" class="mini-button">Top kategorie 1</a> <a href="#" class="mini-button">Top kategorie 2</a> <a href="#" class="mini-button">Top kategorie 3</a> <a href="#" class="mini-button">Top kategorie 4</a> <a href="#" class="mini-button">Top 1</a> <a href="#" class="mini-button">Top kategorie 2</a> <a href="#" class="mini-button">Top kategorie kategorie kategorie 3</a> <a href="#" class="mini-button">Top kategorie 4</a> <a href="#" class="mini-button">Top kategorie 1</a> <a href="#" class="mini-button">Top kategorieeeeeeee 2</a> <a href="#" class="mini-button">Top kategorie 3</a> <a href="#" class="mini-button">Top kategorie 4</a></div>
<p>&nbsp;</p>