The Power of Pure CSS - No JavaScript Needed

2

* {
  height: 100%;
  margin: 0;
  box-sizing: border-box;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
}
.box {
  margin: 50px auto;
  border: 15px solid var(--black);
  border-radius: 5px;
}

:root {
  --black: #08170a;
  --black-green: #0f2913;
  --green-black: #1e5225;
  --green-black-medium: #26915d;
  --green: #06ba78;
  --green-white-medium: #6ccf93;
  --green-white: #b8ffc0;
}

.box {
  width: 200px;
  height: 200px;
  background: var(--black-green);
  overflow: hidden;
}

.box .background {
  /* size of box plus tile size * 2 */
  width: calc(100% + 100px);
  height: calc(100% + 100px);

/* tile picture */
  background: linear-gradient(124deg, var(--green-black) 12px, transparent 13px) -50px 0px,
    linear-gradient(236deg, var(--green-black-medium) 12px, transparent 13px) -50px 0px,
    linear-gradient(303deg, var(--green-white-medium) 12px, transparent 13px) -25px -12px,
    linear-gradient(58deg, var(--green-white) 12px, transparent 13px) 25px -12px;

/* tile size */
  background-size: 50px 50px;

animation: slide 5s linear infinite;
}

/* move only the tile size */
@keyframes slide {
  0% {
    transform: translate(-50px, 0);
  }
  100% {
    transform: translate(0, -50px);
  }
}

2

Animated Tile Background

By: Nethan Pogi

/* CSS */
body{
  margin:0;
  height:100vh;
  display:grid;
  place-items:center;
  background:#fff;
  font-family: ui-sans-serif, Roboto, Arial;
  color:#0b1020;
}

.ccs-demo{
  width:(320px, 92vw);
  display:grid;
  place-items:center;
}

.ccs-skel{
  width:min(380px, 92vw);
  border-radius:22px;
  padding:14px;
  border:1px solid rgba(15,23,42,.3);
  background:
    linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.55));
  box-shadow: 0 26px 60px rgba(2,6,23,.10);
  display:grid;
  gap:12px;
}

/* Shared shimmer base */
.ccs-skel :where(.ccs-skel__avatar, .ccs-skel__line){
  background:
    linear-gradient(90deg,
      rgba(15,23,42,.06) 0%,
      rgba(15,23,42,.10) 35%,
      rgba(255,255,255,.65) 50%,
      rgba(15,23,42,.10) 65%,
      rgba(15,23,42,.06) 100%);
  background-size: 220% 100%;
  animation: ccs-shimmer 1.35s ease-in-out infinite;
  border:1px solid rgba(15,23,42,.3);
}

@keyframes ccs-shimmer{
  0%{ background-position: 120% 0; }
  100%{ background-position: -120% 0; }
}

.ccs-skel__item{
  display:flex;
  gap:12px;
  align-items:center;
  padding:10px;
  border-radius:16px;
  background: rgba(255,255,255,.45);
  border:1px solid rgba(15,23,42,.3);
}

.ccs-skel__avatar{
  width:44px;
  height:44px;
  border-radius:14px;
  flex:0 0 auto;
}

.ccs-skel__lines{
  flex:1;
  display:grid;
  gap:8px;
}

.ccs-skel__line{
  height:12px;
  border-radius:999px;
}

/* Width helpers (edit these for variety) */
.ccs-w-75{ width:75%; }
.ccs-w-70{ width:70%; }
.ccs-w-60{ width:60%; }
.ccs-w-50{ width:50%; }
.ccs-w-45{ width:45%; }
.ccs-w-40{ width:40%; }

2

List Loaders

By: Nethan Pogi

body {
  background: #ede9de; 
}
.container {
  left: 50%;
  margin: auto -50px;
  position: absolute;
  top: 50%;
}
.swing div {
  border-radius: 50%;
  float: left;
  height: 1em;
  width: 1em;
}
.swing div:nth-of-type(1) {
  background: -webkit-linear-gradient(left, #385c78 0%, #325774 100%);
  background: linear-gradient(to right, #385c78 0%, #325774 100%);
}
.swing div:nth-of-type(2) {
  background: -webkit-linear-gradient(left, #325774 0%, #47536a 100%);
  background: linear-gradient(to right, #325774 0%, #47536a 100%);
}
.swing div:nth-of-type(3) {
  background: -webkit-linear-gradient(left, #4a5369 0%, #6b4d59 100%);
  background: linear-gradient(to right, #4a5369 0%, #6b4d59 100%);
}
.swing div:nth-of-type(4) {
  background: -webkit-linear-gradient(left, #744c55 0%, #954646 100%);
  background: linear-gradient(to right, #744c55 0%, #954646 100%);
}
.swing div:nth-of-type(5) {
  background: -webkit-linear-gradient(left, #9c4543 0%, #bb4034 100%);
  background: linear-gradient(to right, #9c4543 0%, #bb4034 100%);
}
.swing div:nth-of-type(6) {
  background: -webkit-linear-gradient(left, #c33f31 0%, #d83b27 100%);
  background: linear-gradient(to right, #c33f31 0%, #d83b27 100%);
}
.swing div:nth-of-type(7) {
  background: -webkit-linear-gradient(left, #da3b26 0%, #db412c 100%);
  background: linear-gradient(to right, #da3b26 0%, #db412c 100%);
}
.shadow {
  clear: left;
  padding-top: 1.5em;
}
.shadow div {
  -webkit-filter: blur(1px);
  filter: blur(1px);
  float: left;
  width: 1em;
  height: .25em;
  border-radius: 50%;
  background: #e3dbd2;
}
.shadow .shadow-l {
  background: #d5d8d6;
}
.shadow .shadow-r {
  background: #eed3ca;
}
@-webkit-keyframes ball-l {
  0%, 50% {
    -webkit-transform: rotate(0) translateX(0);
    transform: rotate(0) translateX(0);
  }
  100% {
    -webkit-transform: rotate(50deg) translateX(-2.5em);
    transform: rotate(50deg) translateX(-2.5em);
  }
}
@keyframes ball-l {
  0%, 50% {
    -webkit-transform: rotate(0) translate(0);
    transform: rotate(0) translateX(0);
  }
  100% {
    -webkit-transform: rotate(50deg) translateX(-2.5em);
    transform: rotate(50deg) translateX(-2.5em);
  }
}
@-webkit-keyframes ball-r {
  0% {
    -webkit-transform: rotate(-50deg) translateX(2.5em);
    transform: rotate(-50deg) translateX(2.5em);
  }
  50%,
  100% {
    -webkit-transform: rotate(0) translateX(0);
    transform: rotate(0) translateX(0);
  }
}
@keyframes ball-r {
  0% {
    -webkit-transform: rotate(-50deg) translateX(2.5em);
    transform: rotate(-50deg) translateX(2.5em);
  }
  50%,
  100% {
    -webkit-transform: rotate(0) translateX(0);
    transform: rotate(0) translateX(0)
  }
}
@-webkit-keyframes shadow-l-n {
  0%, 50% {
    opacity: .5;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    opacity: .125;
    -webkit-transform: translateX(-1.57em);
    transform: translateX(-1.75em);
  }
}
@keyframes shadow-l-n {
  0%, 50% {
    opacity: .5;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    opacity: .125;
    -webkit-transform: translateX(-1.75);
    transform: translateX(-1.75em);
  }
}
@-webkit-keyframes shadow-r-n {
  0% {
    opacity: .125;
    -webkit-transform: translateX(1.75em);
    transform: translateX(1.75em);
  }
  50%,
  100% {
    opacity: .5;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes shadow-r-n {
  0% {
    opacity: .125;
    -webkit-transform: translateX(1.75em);
    transform: translateX(1.75em);
  }
  50%,
  100% {
    opacity: .5;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.swing-l {
  -webkit-animation: ball-l .425s ease-in-out infinite alternate;
  animation: ball-l .425s ease-in-out infinite alternate;
}
.swing-r {
  -webkit-animation: ball-r .425s ease-in-out infinite alternate;
  animation: ball-r .425s ease-in-out infinite alternate;
}
.shadow-l {
  -webkit-animation: shadow-l-n .425s ease-in-out infinite alternate;
  animation: shadow-l-n .425s ease-in-out infinite alternate;
}
.shadow-r {
  -webkit-animation: shadow-r-n .425s ease-in-out infinite alternate;
  animation: shadow-r-n .425s ease-in-out infinite alternate;
}

2

Newton’s Cradle Loader

By: Nethan Pogi

<section class="accordion">
  <div class="tab">
    
    <label for="cb1" class="tab__label">Checkbox</label>
    <div class="tab__content">
      <p>Pure CSS accordion based on the "input:checked + label" style trick.</p>
    </div>
  </div>
  <div class="tab">
    
    <label for="cb2" class="tab__label">Open multiple</label>
    <div class="tab__content">
      <p>Using <code><input type="checkbox"></code> allows to have several tabs open at the same time.</p>
    </div>
  </div>
</section>

<section class="accordion accordion--radio">
  <div class="tab">
    
    <label for="rd1" class="tab__label">Radio</label>
    <div class="tab__content">
      <p>If you want to have only one tab open, you can use <code><input type="radio"></code>.</p>
    </div>
  </div>
  <div class="tab">
    
    <label for="rd2" class="tab__label">Open single</label>
    <div class="tab__content">
      <p>But if you wanna close the opened tab, you must add a "close" button somewhere, like the one below, that is just another styled radio input.</p>
    </div>
  </div>
  <div class="tab">
    
    <label for="rd3" class="tab__close">Close open tab ×</label>
  </div>
</section>

:root {
  --primary: #227093;
  --secondary: #ff5252;
  --background: #eee;
  --highlight: #ffda79;
  /* Theme color */
  --theme: var(--primary);
}
*, *::before, *::after {
  box-sizing: border-box;
}
body {
  display: grid;
  place-content: center;
  place-items: start;
  grid-template-columns: repeat(auto-fit, min(100%, 30rem));
  gap: 1rem;
  min-height: 100vh;
  margin: 0;
  padding: 1rem;
  color: var(--primary);
  background: var(--background);
}

/* Core styles/functionality */
.tab {
  position: relative;
}
.tab input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
.tab__content {
  max-height: 0;
  overflow: hidden;
  transition: all 0.35s;
}
.tab input:checked ~ .tab__content {
  max-height: 10rem;
}

/* Visual styles */
.accordion {
  color: var(--theme);
  border: 2px solid;
  border-radius: 0.5rem;
  overflow: hidden;
}
.tab__label,
.tab__close {
  display: flex;
  color: white;
  background: var(--theme);
  cursor: pointer;
}
.tab__label {
  justify-content: space-between;
  padding: 1rem;
}
.tab__label::after {
  content: "\276F";
  width: 1em;
  height: 1em;
  text-align: center;
  transform: rotate(90deg);
  transition: all 0.35s;
}
.tab input:checked + .tab__label::after {
  transform: rotate(270deg);
}
.tab__content p {
  margin: 0;
  padding: 1rem;
}
.tab__close {
  justify-content: flex-end;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
}
.accordion--radio {
  --theme: var(--secondary);
}

/* Arrow animation */
.tab input:not(:checked) + .tab__label:hover::after {
  animation: bounce .5s infinite;
}
@keyframes bounce {
  25% {
    transform: rotate(90deg) translate(.25rem);
  }
  75% {
    transform: rotate(90deg) translate(-.25rem);
  }
}

2

Pure CSS Accordion

By: Nethan Pogi

2

Circular Loader

By: Nethan Pogi

<div class="cardbox">
    <div class="card">
      <div class="front">
        <img src="https://images.unsplash.com/photo-1542324216541-c84c8ba6db04?q=80&w=880&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Rose">
        <b>Rose</b>
        <p>
          Roses are one of the most iconic flowers in the world. They symbolize love,
          beauty, and passion, and come in a wide range of colors with different meanings.
        </p>
      </div>
      <div class="back">
        <img src="https://images.unsplash.com/photo-1542324216541-c84c8ba6db04?q=80&w=880&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Rose">
        <p>
          Roses have been cultivated for thousands of years. Besides their beauty,
          they are widely used in perfumes, cosmetics, and decorative gardens.
        </p>
      </div>
    </div>
  </div>

<div class="cardbox">
    <div class="card">
      <div class="front">
        <img src="https://images.unsplash.com/photo-1517346921254-4797474379e1?q=80&w=880&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Sunflower">
        <b>Sunflower</b>
        <p>
          Sunflowers are known for turning toward the sun. They represent happiness,
          positivity, and warmth, making them a symbol of joy and vitality.
        </p>
      </div>
      <div class="back">
        <img src="https://images.unsplash.com/photo-1517346921254-4797474379e1?q=80&w=880&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Sunflower">
        <p>
          Native to the Americas, sunflowers are also important for agriculture.
          Their seeds produce oil and nutritious snacks enjoyed worldwide.
        </p>
      </div>
    </div>
  </div>

<div class="cardbox">
    <div class="card">
      <div class="front">
        <img src="https://images.unsplash.com/photo-1708577384771-0579daefc239?q=80&w=880&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Tulip">
        <b>Tulip</b>
        <p>
          Tulips are elegant spring flowers famous for their smooth petals and vibrant
          colors. They are often associated with renewal and new beginnings.
        </p>
      </div>
      <div class="back">
        <img src="https://images.unsplash.com/photo-1708577384771-0579daefc239?q=80&w=880&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Tulip">
        <p>
          Originally cultivated in Central Asia, tulips became extremely popular
          in Europe and are now a symbol strongly linked to the Netherlands.
        </p>
      </div>
    </div>
  </div>

</div>

*{margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}
:root {
    --black: #08170a;
    --black-green: #0f2913;
    --green-black: #1e5225;
    --green-black-medium: #26915d;
    --green: #06ba78;
    --green-white-medium: #6ccf93;
    --green-white: #b8ffc0;
    --white: #fff;
}

body {background: var(--green-white)}

.alinha-cards{
  width: 100%;
  display: flex; 
  flex-wrap: wrap; 
  justify-content: center; 
  align-items: center; 
  gap: 50px; 
  margin: 15vh 0 10vh;
}
.alinha-cards .cardbox {
  width: 250px;
  height: 70vh;
  perspective: 500px;
}
.alinha-cards .cardbox .card {
  width: 100%;
  height: 100%; 
  position: relative;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  perspective: 500px;
}
.alinha-cards .cardbox .card .front{
  background: var(--green-black);
}
.alinha-cards .cardbox .card .back{
  background: var(--black);
  transform: rotateY(180deg);
}
.alinha-cards .cardbox .card img{
  width: 70px; 
  height: 70px; 
  border-radius: 50%;
  position: absolute; 
  top: -30px;
  transition: .6s;
  transform-style: preserve-3d;
}
.alinha-cards .cardbox .card b {font-size: 30px; color: var(--white); text-align: center;}
.alinha-cards .cardbox .card p {font-size: 13px; color: var(--white);letter-spacing: 1px; text-align: center; line-height: 20px;}

.cardbox .card .back, 
.cardbox .card .front {
  position: absolute; 
  width: 100%; 
  height: 100%;
  padding: 50px 20px 20px; 
  box-sizing: border-box; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  flex-direction: column;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.alinha-cards .cardbox:hover .card {transform: rotateY(180deg);}
.alinha-cards .cardbox:hover .card img{animation: flipTwice 1s ease-in-out 1;}

.alinha-cards .cardbox .card .front:before, 
.alinha-cards .cardbox .card .back:before{
  content: "";
  display: block;
  width: 90px;
  height: 90px;
  background: var(--green-white);
  position: absolute;
  margin: 0 auto;
  top: -40px;
  border-radius: 50%;
}

@keyframes flipTwice {
    0%   { transform: rotateY(0deg); }
    60%  { transform: rotateY(180deg); }
    100%  { transform: rotateY(360deg); }
}

2

Flip Cards

By: Nethan Pogi

1

Border Trace

By: Nethan Pogi

/* Change colors here */
:root{
  --ccs-bg:#ffffff;
  --ccs-ink:#0b1020;
  --ccs-card:#0b0f1a;
  --ccs-glow:#b79cff;
  --ccs-glow2:#7c5cff;
}
body{
  margin:0;
  min-height:100vh;
  display:grid;
  place-items:center;
  background:#fff;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

/* Card */
.ccs-electricCard{
  width:min(340px, 86vw);
  padding:12px 18px;
  border-radius:22px;
  background:
    radial-gradient(140% 100% at 20% 10%, rgba(183,156,255,.18), transparent 60%),
    radial-gradient(120% 90% at 80% 90%, rgba(124,92,255,.16), transparent 55%),
    var(--ccs-card);
  position:relative;
  overflow:hidden;
  box-shadow:
    0 18px 50px rgba(0,0,0,.22),
    0 0 0 1px rgba(255,255,255,.06) inset;
}

/* Neon border layer (base glow) */
.ccs-electricCard::before{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius:inherit;
  background:
    conic-gradient(from 0deg,
      transparent 0 8%,
      rgba(183,156,255,.85) 10%,
      transparent 16%,
      rgba(183,156,255,.55) 26%,
      transparent 34%,
      rgba(124,92,255,.95) 44%,
      transparent 52%,
      rgba(183,156,255,.75) 66%,
      transparent 74%,
      rgba(124,92,255,.85) 86%,
      transparent 100%);
  filter: blur(7px);
  opacity:.9;
  animation: ccs-spin 3.2s linear infinite;
  /* show only the ring */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding:3px;
}

/* "Electric" crackle layer (jitter + little sparks) */
.ccs-electricCard::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:inherit;
  pointer-events:none;

/* Tiny sparks around the edges (random-ish via multiple gradients) */
  background:
    radial-gradient(8px 6px at 10% 8%, rgba(183,156,255,.9), transparent 60%),
    radial-gradient(10px 7px at 86% 12%, rgba(124,92,255,.9), transparent 60%),
    radial-gradient(8px 6px at 92% 58%, rgba(183,156,255,.85), transparent 60%),
    radial-gradient(9px 7px at 14% 78%, rgba(124,92,255,.9), transparent 60%),
    radial-gradient(8px 6px at 55% 92%, rgba(183,156,255,.85), transparent 60%),
    conic-gradient(from 90deg, rgba(183,156,255,.18), transparent 18%, rgba(124,92,255,.22), transparent 60%, rgba(183,156,255,.18));
  filter: blur(1px) drop-shadow(0 0 12px rgba(183,156,255,.55));
  opacity:.9;

/* ring-only mask again */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding:1px;

animation: ccs-zap 320ms steps(3, end) infinite;
}

/* Content */
.ccs-pill{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:8px 12px;
  border-radius:999px;
  font-weight:700;
  letter-spacing:.08em;
  font-size:12px;
  color:rgba(255,255,255,.85);
  background:rgba(255,255,255,.08);
  box-shadow: 0 0 0 1px rgba(255,255,255,.10) inset;
}

.ccs-title{
  margin:22px 0 8px;
  font-size:34px;
  line-height:1.05;
  color:#fff;
  letter-spacing:-.02em;
}

.ccs-sub{
  margin:0;
  max-width:26ch;
  color:rgba(255,255,255,.62);
  font-size:14px;
  line-height:1.45;
}

/* Animations */
@keyframes ccs-spin{
  to{ transform: rotate(360deg); }
}

/* quick jitter to feel "electric" */
@keyframes ccs-zap{
  0%   { transform: translate(0,0) rotate(0deg); opacity:.85; }
  35%  { transform: translate(1px,-1px) rotate(.4deg); opacity:1; }
  70%  { transform: translate(-1px,1px) rotate(-.4deg); opacity:.92; }
  100% { transform: translate(0,0) rotate(0deg); opacity:.85; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .ccs-electricCard::before,
  .ccs-electricCard::after{ animation:none; }
}

1

Animated Border Card

By: Nethan Pogi

body{
  margin:0;
  height:100vh;
  display:grid;
  place-items:center;
  background:#fff;
  font-family: ui-sans-serif, Roboto, Arial;
  color:#0b1020;
}

.ccs-stage{
  display:flex;
  gap:14px;
  padding:14px;
  border-radius:20px;
  border:1px solid rgba(15,23,42,.5);
  box-shadow:0 18px 50px rgba(2,6,23,.08);
  background:#fff;
}

.ccs-story{
  width:64px;
  height:64px;
  border:0;
  padding:0;
  border-radius:999px;
  cursor:pointer;
  position:relative;
  background:transparent;
  -webkit-tap-highlight-color:transparent;
  transition:transform .14s ease;
}
.ccs-story:hover{ transform:translateY(-1px); }
.ccs-story:active{ transform:translateY(0) scale(.98); }

/* Inner “photo” */
.ccs-story::before{
  content:"";
  position:absolute;
  inset:6px; /* ring thickness */
  border-radius:inherit;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.8), transparent 45%),
    linear-gradient(135deg, rgba(37,99,235,.35), rgba(244,63,94,.35)),
    linear-gradient(180deg, rgba(15,23,42,.06), rgba(15,23,42,.02));
  border:1px solid rgba(15,23,42,.5);
  box-shadow:0 12px 24px rgba(2,6,23,.10);
}

/* Ring layer */
.ccs-story::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:2px;
  background:linear-gradient(135deg, rgba(37,99,235,1), rgba(244,63,94,1), rgba(245,158,11,1));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  opacity:1;
}

/* Seen vs unseen */
.ccs-story--seen::after{
  background:linear-gradient(180deg, rgba(15,23,42,.18), rgba(15,23,42,.12));
  opacity:1;
}

/* Subtle “unseen energy” */
.ccs-story--unseen::after{
  filter:saturate(1.05);
}
.ccs-story--unseen:hover::after{
  transform:rotate(10deg);
  transition:transform .25s ease;
}

/* Focus */
.ccs-story:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px rgba(37,99,235,.14);
  border-radius:999px;
}

1

Instagram Story Ring Status

By: Nethan Pogi

@import url(https://fonts.bunny.net/css?family=krub:200i,300);

body {
  font-family: 'Krub', sans-serif;
  background-color: rgb(248, 244, 238);
  color: rgb(10, 10, 10);
  min-height: 100vh;
  margin: 0;
  padding: 2rem;
  display: grid;
  place-content: center;
}

/* Wrapper */
.wrapper {
  perspective: 500px;
  transform-style: preserve-3d;
  position: relative;
  display: grid;
  place-content: center;
}

.wrapper::before {
  content: "What";
  font-size: clamp(2rem, 5.5vw, 20rem);
  text-transform: uppercase;
  text-decoration: underline overline;
  text-decoration-color: hsl(70, 100%, 40%);
  text-underline-offset: 0.35em;
  text-decoration-thickness: 1px;
  font-weight: 700;

animation: swapText 15s linear infinite,
             rotateWrapper 15s linear infinite;
}

/* Text swapping animation */
@keyframes swapText {
  10%, 100% { content: "What"; }
  20% { content: "goes"; }
  50% { content: "around"; }
  60% { content: "comes"; }
  90% { content: "around"; }
}

/* Rotation animation */
@keyframes rotateWrapper {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(1800deg);
  }
}

1

Swap Text Animation

By: Nethan Pogi

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&display=swap');

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.scene {
  min-height: 100vh;
  background: #050510;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(0, 255, 255, 0.04) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 50%, rgba(255, 0, 200, 0.04) 0%, transparent 60%);
  font-family: 'Orbitron', sans-serif;
}

.buttons-wrapper {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
}

/* Base Button */
.neon-btn {
  position: relative;
  padding: 16px 52px;
  font-family: 'Orbitron', sans-serif;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 4px;
  text-transform: uppercase;
  background: transparent;
  border: 2px solid;
  cursor: pointer;
  outline: none;
  transition:
    background 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.2s ease,
    letter-spacing 0.3s ease;
  clip-path: polygon(12px 0%, 100% 0%, calc(100% - 12px) 100%, 0% 100%);
}

.neon-btn span {
  position: relative;
  z-index: 1;
  transition: text-shadow 0.3s ease;
}

/* Cyan variant */
.btn-cyan {
  color: #00f5ff;
  border-color: #00f5ff;
  box-shadow:
    0 0 8px rgba(0, 245, 255, 0.3),
    inset 0 0 8px rgba(0, 245, 255, 0.05);
}

.btn-cyan:hover {
  background: rgba(0, 245, 255, 0.08);
  letter-spacing: 6px;
  box-shadow:
    0 0 20px rgba(0, 245, 255, 0.7),
    0 0 50px rgba(0, 245, 255, 0.4),
    0 0 100px rgba(0, 245, 255, 0.15),
    inset 0 0 20px rgba(0, 245, 255, 0.1);
  transform: translateY(-2px);
}

.btn-cyan:hover span {
  text-shadow:
    0 0 8px #00f5ff,
    0 0 20px #00f5ff,
    0 0 40px #00f5ff;
}

/* Magenta variant */
.btn-magenta {
  color: #ff00cc;
  border-color: #ff00cc;
  box-shadow:
    0 0 8px rgba(255, 0, 204, 0.3),
    inset 0 0 8px rgba(255, 0, 204, 0.05);
}

.btn-magenta:hover {
  background: rgba(255, 0, 204, 0.08);
  letter-spacing: 6px;
  box-shadow:
    0 0 20px rgba(255, 0, 204, 0.7),
    0 0 50px rgba(255, 0, 204, 0.4),
    0 0 100px rgba(255, 0, 204, 0.15),
    inset 0 0 20px rgba(255, 0, 204, 0.1);
  transform: translateY(-2px);
}

.btn-magenta:hover span {
  text-shadow:
    0 0 8px #ff00cc,
    0 0 20px #ff00cc,
    0 0 40px #ff00cc;
}

/* Lime variant */
.btn-lime {
  color: #aaff00;
  border-color: #aaff00;
  box-shadow:
    0 0 8px rgba(170, 255, 0, 0.3),
    inset 0 0 8px rgba(170, 255, 0, 0.05);
}

.btn-lime:hover {
  background: rgba(170, 255, 0, 0.08);
  letter-spacing: 6px;
  box-shadow:
    0 0 20px rgba(170, 255, 0, 0.7),
    0 0 50px rgba(170, 255, 0, 0.4),
    0 0 100px rgba(170, 255, 0, 0.15),
    inset 0 0 20px rgba(170, 255, 0, 0.1);
  transform: translateY(-2px);
}

.btn-lime:hover span {
  text-shadow:
    0 0 8px #aaff00,
    0 0 20px #aaff00,
    0 0 40px #aaff00;
}

/* Active press */
.neon-btn:active {
  transform: translateY(1px) scale(0.98);
}

/* Flicker animation on load */
@keyframes flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
  20%, 24%, 55% { opacity: 0.6; }
}

.neon-btn {
  animation: flicker 5s infinite;
}

.btn-magenta { animation-delay: 0.4s; }
.btn-lime    { animation-delay: 0.8s; }

1

All

Pulse Animation

By: Nethan Pogi

Animated Tile Background

By: Nethan Pogi

List Loaders

By: Nethan Pogi

Newton’s Cradle Loader

By: Nethan Pogi

Pure CSS Accordion

By: Nethan Pogi

Circular Loader

By: Nethan Pogi

Flip Cards

By: Nethan Pogi

Border Trace

By: Nethan Pogi

Animated Border Card

By: Nethan Pogi

Instagram Story Ring Status

By: Nethan Pogi

Swap Text Animation

By: Nethan Pogi

Neon Glow buttons

By: Nethan Pogi