clickstyles/dist/clickstyles.css

A collection of animated styles for buttons, CTAs, links, cards, toggles, and other interactive UI elements.

.cs__btn {
  position: relative;
  display: inline-flex;
  overflow: hidden;
  white-space: nowrap;
  padding: 1em 2em;
  border: 2px solid transparent;
  border-radius: 50px;
  font-family: "Prompt", sans-serif !important;
  font-size: 1.2rem;
  color: white;
  background-image: linear-gradient(#1a1a1a, #1a1a1a), linear-gradient(45deg, #fcb045, #fd1d1d, #833ab4);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  cursor: pointer;
}

.cs__btn-inner {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.cs__btn-static {
  display: inline-block;
}

.cs__btn-animated {
  display: inline-flex;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  transition: width 0.3s ease;
}

.cs__btn-animated > span {
  display: inline-block;
  vertical-align: middle;
  transform: translateY(30px) rotateZ(-30deg);
  opacity: 0;
  transition: all 0.3s ease;
}

.cs__btn-space {
  display: inline-block !important;
  width: 0.2em;
  min-width: 0.2em;
  overflow: visible !important;
  flex-shrink: 0;
  transform: none !important;
  opacity: 1 !important;
  transition: none !important;
}

.ca__btn-shine_effect {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: skewX(-20deg);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}

.cs__btn-pulse-pop {
  padding: 1em 2em;
  border: none;
  border-radius: 40px;
  background: linear-gradient(135deg, #ff6a00, #ee0979);
  color: white;
  cursor: pointer;
  transition: box-shadow 0.3s ease;
}

.cs__btn-press-bounce {
  background: linear-gradient(135deg, #8e2de2, #4a00e0);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.cs__btn-magnetic {
  border: none;
  background: linear-gradient(45deg, #ff4e50, #f9d423);
  transition: transform 0.3s;
  will-change: transform;
}

.cs__btn-shine {
  background: linear-gradient(45deg, #00f260, #0575e6);
}

.cs__btn-shine .cs__shine {
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  pointer-events: none;
}

.cs__btn-spin-bg {
  position: relative;
  padding: 1em 2em;
  border: none;
  border-radius: 50px;
  background: #1e1e1e;
  color: white;
  font-size: 1rem;
  cursor: pointer;
  overflow: hidden;
}

.cs__btn-spin-bg__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300%;
  height: 300%;
  transform: translate(-50%, -50%) scale(1);
  border-radius: 999px;
  z-index: 0;
  pointer-events: none;
  filter: blur(4px);
}

.cs__btn-spin-bg__text {
  position: relative;
  z-index: 1;
}