Hiệu ứng CSS đẹp Miễn Phí

Cung cấp mã code CSS đẹp miễn phí

Hiệu ứng rung nhẹ (Vibration)

vibrate

.vibrate {
  display: inline-block;
  animation: vibrate 0.3s linear infinite;
}
@keyframes vibrate {
  0% { transform: translate(0); }
  25% { transform: translate(-1px, 1px); }
  50% { transform: translate(1px, -1px); }
  75% { transform: translate(-1px, -1px); }
  100% { transform: translate(1px, 1px); }
}

Hiệu ứng bật sáng khi hover (Glow Pulse)

glow-hover

.glow-hover {
  background-color: #111;
  color: white;
  border: none;
  padding: 10px 20px;
  transition: box-shadow 0.4s ease;
}
.glow-hover:hover {
  box-shadow: 0 0 10px #00f7ff, 0 0 20px #00f7ff, 0 0 30px #00f7ff;
}

Hiệu ứng viền phát sáng Neon (NEO)

neon-border

.neon-border {
  border: 2px solid #0ff;
  box-shadow: 0 0 5px #0ff, 0 0 10px #0ff, 0 0 20px #0ff;
  transition: box-shadow 0.3s ease;
}
.neon-border:hover {
  box-shadow: 0 0 10px #0ff, 0 0 20px #0ff, 0 0 30px #0ff;
}

Hiệu ứng đổ bóng mềm mại (Soft Shadow)

soft-shadow

.soft-shadow {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}
.soft-shadow:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

Hiệu ứng Zoom khi hover

zoom-effect

.zoom-effect {
  transition: transform 0.3s ease;
}
.zoom-effect:hover {
  transform: scale(1.1);
}

Hiệu ứng Slide từ trái sang phải

slide-in-left

.slide-in-left {
  transform: translateX(-100%);
  animation: slideInLeft 0.5s forwards;
}

@keyframes slideInLeft {
  to {
    transform: translateX(0);
  }
}

Hiệu ứng Bounce (nhún nhảy)

bounce

.bounce {
  animation: bounceAnimation 1s infinite;
}

@keyframes bounceAnimation {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}

Hiệu ứng NEO LED Viền hiện đại

z3tkm191

selector {
  position: relative;
  padding: 14px 30px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  background: linear-gradient(135deg, #00feba, #5b548a);
  border: none;
  border-radius: 50px;
  overflow: hidden;
  z-index: 1;
  transition: all 0.4s ease;
  box-shadow: 0 0 15px rgba(0, 255, 234, 0.5);
}

selector::before {
  content: \'\';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 0deg, transparent, #00feba, transparent, #5b548a, transparent);
  animation: rotate 4s linear infinite;
  z-index: -1;
}

selector::after {
  content: \'\';
  position: absolute;
  inset: 2px;
  background: #1e1e2f;
  border-radius: 50px;
  z-index: -1;
}

selector:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(91, 84, 138, 0.8);
  color: #00feba;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

selector .z3tkm191{color: rgb(255, 255, 255);column-gap: 16px;display: flex;font-family: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";justify-content: center;row-gap: 16px;text-align: center;grid-column-gap: 16px;flex-direction: row;}selector .z3tkm191::before{border-bottom-width: 0px;border-left-width: 0px;border-right-width: 0px;border-top-width: 0px;display: block;-webkit-text-fill-color: rgb(255, 255, 255);-webkit-text-stroke-color: rgb(255, 255, 255);}selector .z3tkm191::after{border-bottom-width: 0px;border-left-width: 0px;border-right-width: 0px;border-top-width: 0px;display: block;-webkit-text-fill-color: rgb(255, 255, 255);-webkit-text-stroke-color: rgb(255, 255, 255);}selector .gxxhhjii{appearance: button;border-bottom-style: solid;border-left-style: solid;border-right-style: solid;border-top-style: solid;cursor: pointer;display: block;font-family: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";padding-bottom: 0px;padding-left: 0px;padding-right: 0px;padding-top: 0px;border-top-width: 0px;border-right-width: 0px;border-bottom-width: 0px;border-left-width: 0px;}selector .gxxhhjii::before{border-bottom-width: 0px;border-left-width: 0px;border-right-width: 0px;border-top-width: 0px;text-align: center;-webkit-text-fill-color: rgb(255, 255, 255);-webkit-text-stroke-color: rgb(255, 255, 255);}selector .gxxhhjii::after{border-bottom-width: 0px;border-left-width: 0px;border-right-width: 0px;border-top-width: 0px;text-align: center;-webkit-text-fill-color: rgb(255, 255, 255);-webkit-text-stroke-color: rgb(255, 255, 255);}@media (max-width: 1024px) {selector .gxxhhjii{padding-bottom: 0px;padding-left: 0px;padding-right: 0px;padding-top: 0px;border-top-width: 0px;border-right-width: 0px;border-bottom-width: 0px;border-left-width: 0px;}}@media (max-width: 767px) {selector .gxxhhjii{padding-bottom: 0px;padding-left: 0px;padding-right: 0px;padding-top: 0px;border-top-width: 0px;border-right-width: 0px;border-bottom-width: 0px;border-left-width: 0px;}}

Hiệu ứng button đổi màu liên tục

rainbow-button

<a href="tel:0792762794" class="rainbow-button">Tư Vấn Ngay..!</a>    .rainbow-button {   display: inline-block;   padding: 10px 20px;   border-radius: 8px;   color: white;   background: linear-gradient(270deg, purple, blue, cyan, green, yellow, orange, red, purple);   background-size: 400% 400%;   text-decoration: none;   font-weight: bold;   transition: background-position 0.5s ease, transform 0.3s ease; }  .rainbow-button:hover {   animation: gradientWave 3s ease infinite;   transform: scale(1.05); }  @keyframes gradientWave {   0% { background-position: 0% 50%; }   50% { background-position: 100% 50%; }   100% { background-position: 0% 50%; } }

Hiệu ứng viền phát sáng và lóa sáng backgroud

animated-border-box

selector {
  position: relative;
  padding: 14px 30px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  background: transparent;
  border: none;
  border-radius: 50px;
  z-index: 1;
  cursor: pointer;
  transition: all 0.4s ease;
  box-shadow: 0 0 15px rgba(0, 255, 234, 0.3);
  overflow: hidden;
}

selector::before {
  content: \'\';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 0deg, #00feba, #5b548a, #00feba, #5b548a);
  animation: rotate 4s linear infinite;
  filter: blur(10px);
  z-index: -2;
  opacity: 0.7;
}

selector::after {
  content: \'\';
  position: absolute;
  inset: 2px;
  background: rgba(30, 30, 47, 0.85);
  border-radius: 50px;
  z-index: -1;
}

selector:hover {
  transform: scale(1.08);
  box-shadow: 0 0 25px rgba(0, 255, 234, 0.6);
  color: #00feba;
  letter-spacing: 0.5px;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

selector {
  display: inline-block;
  transition: transform 0.3s ease;
}

selector:hover {
  transform: translateY(-15px);
}
.animated-border-box {
  position: relative;
  padding: 2px; /* khoảng cách viền */
  background: linear-gradient(45deg, #E30613, #6C6C6C, #E30613, #000);
  background-size: 300% 300%;
  border-radius: 16px;
  animation: borderRun 5s linear infinite;
}

.content {
  background-color: #fff;
  border-radius: 14px;
  padding: 24px;
  font-family: \'Inter\', sans-serif;
  font-size: 16px;
  color: #1A1A1A;
  text-align: center;
}

@keyframes borderRun {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

Nền tảng công nghệ AI hàng đầu Việt Nam, cung cấp giải pháp toàn diện cho chuyển đổi số doanh nghiệp.
Chủ sở hữu ông Trần Tuấn Anh
Zalo: 0792762794
Hotline: 0792762794

🎶 Auto Music