Közösség

Közösségi badge

Mutasd meg, hogy a yellow közösség tagja vagy. Egy kódrészlet - bármilyen oldalba beilleszthető.

Előnézet

Vidd rá az egeret a shine effekthez.

Világos háttéren

designer közösség tagja

Sötét háttéren

designer közösség tagja

Hogyan használd

Három lépés, semmilyen külső függőség.

Másold ki a kódot

Kattints a lenti "Kód másolása" gombra. A teljes kódrészlet a vágólapra kerül.

Illeszd be az oldaladba

A footer, sidebar, about oldal vagy bármilyen hely jó. Illeszd be a HTML forráskódba.

Kész

A dark mode és a reduced-motion támogatás automatikusan működik.

Kódrészlet

A teljes kód egyetlen blokkban. Tartalmazza a CSS-t és a HTML-t is.

HTML + CSS

<!-- Hello Yellow közösségi badge -->
<style>
.hy-badge {
  position: relative;
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  flex: 0 0 auto;
  border-radius: 13px;
  isolation: isolate;
  color: #0a0a0a;
  text-align: left;
  text-decoration: none;
  line-height: 1;
}

.hy-badge__logo {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  padding: 17px 11px 15px 15px;
  border-radius: 13px 0 0 13px;
  background-color: #111111;
}

.hy-badge__svg {
  display: block;
  width: auto;
  height: 20px;
  fill: #ffffff;
}

.hy-badge__text {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: center;
  padding: 0 31px 0 15px;
  border-radius: 0 13px 13px 0;
  background-color: #fff012;
  color: #0a0a0a;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  text-align: left;
}

.hy-badge::after {
  position: absolute;
  z-index: 5;
  top: -30%;
  bottom: -30%;
  left: 0;
  width: 35%;
  content: "";
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.05) 20%,
    rgba(255, 255, 255, 0.85) 50%,
    rgba(255, 255, 255, 0.05) 80%,
    transparent 100%
  );
  transform: translateX(-160%) skewX(-20deg);
}

@keyframes hy-badge-shine-sweep {
  from { transform: translateX(-160%) skewX(-20deg); }
  to { transform: translateX(320%) skewX(-20deg); }
}

.hy-badge:hover::after,
.hy-badge:focus-visible::after {
  opacity: 1;
  animation: hy-badge-shine-sweep 0.9s ease-out 1;
}

.hy-badge:focus-visible {
  outline: 2px solid #fff012;
  outline-offset: 3px;
}

html.dark .hy-badge__logo,
body.dark .hy-badge__logo {
  background-color: #ffffff;
}

html.dark .hy-badge__svg,
body.dark .hy-badge__svg {
  fill: #171717;
}

@media (prefers-reduced-motion: reduce) {
  .hy-badge:hover::after,
  .hy-badge:focus-visible::after {
    animation: none;
    opacity: 0;
  }
}
</style>

<a
  class="hy-badge"
  href="https://www.helloyellow.hu"
  target="_blank"
  rel="noopener noreferrer"
  aria-label="Hello Yellow - designers közösség tagja"
>
  <span class="hy-badge__logo">
    <svg viewBox="0 120 1120 370" xmlns="http://www.w3.org/2000/svg" class="hy-badge__svg" aria-hidden="true">
      <path d="M1079.08 194.636H1119.92L1060.92 385.179H1010.36L965.092 250.079L919.341 385.179H869.165L810.308 194.636H851.149L894.691 344.596L946.833 194.636H983.784L1035.1 344.596L1079.08 194.636Z"></path>
      <path d="M690.958 389.715C632.614 389.715 588.273 343.818 588.273 288.586C588.273 233.742 632.225 189.012 690.958 189.012C749.302 189.012 793.255 233.353 793.255 288.586C793.255 344.596 748.913 389.715 690.958 389.715ZM691.347 353.931C727.909 353.931 755.914 325.148 755.914 288.974C755.914 252.801 728.298 224.796 691.347 224.796C653.618 224.796 626.002 253.19 626.002 288.974C626.002 324.759 654.007 353.931 691.347 353.931Z"></path>
      <path d="M437.813 385.179V127.945H475.932V385.179H437.813Z"></path>
      <path d="M518.022 385.179V127.945H556.14V385.179H518.022Z"></path>
      <path d="M405.245 284.034V303.093H248.494C253.94 340.434 283.5 354.825 311.117 354.825C341.455 354.825 359.736 341.211 372.183 330.71L395.91 357.548C384.241 368.05 355.847 390.609 312.283 390.609C252.384 390.609 209.598 348.991 209.598 289.869C209.598 228.413 256.273 189.906 309.95 189.906C365.182 189.906 404.856 229.58 405.245 284.034ZM309.561 225.302C278.055 225.302 255.495 245.916 249.272 273.533H365.96C362.459 247.472 341.066 225.302 309.561 225.302Z"></path>
      <path d="M103.279 334.954L156.52 198.849H197.352L86.8668 481.066H46.0354L84.0646 383.791L4.80369 198.849H48.0369L103.279 334.954Z"></path>
    </svg>
  </span>
  <span class="hy-badge__text">
    <span>designer</span>
    <span>közösség tagja</span>
  </span>
</a>

Technikai részletek

Nem ütközik más stílussal

Minden CSS osztály .hy-badge prefixet használ, nem fog ütközni a meglévő stílusokkal.

Dark mode

Ha az oldalad <html> vagy <body> elemén van dark class, a badge automatikusan invertálódik.

Akadálymentesség

Keyboard focus ring, aria-label, és prefers-reduced-motion támogatás beépítve.

Kompatibilitás

Működik WordPress, Webflow, Squarespace, Wix, Framer, Shopify és bármilyen egyedi HTML oldalon.

← Shader Studio Letöltések →