Code Button đẹp

11 Tháng 3, 2025 | By toanbingo | Filed in: Chưa phân loại.

Nguồn: 1. CSS Button Animations: 40 Ideas to Try + Code Examples

How to Create a Pulse Effect With CSS Animation

Css

  1. Pulse có chuyển màu
/*code button*/
.btn {
  padding: 10px 20px;
    border-radius: 30px;
  margin: 10px;
  border: none;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s ease;
}
.btn a {
    color: #ffffff!important;
}

/* 1. Pulse Animation */
.btn-pulse {
  background-color: #0e94ee;
  color: white;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes pulse {
  0%, 100% { 
    transform: scale(1);
    background-color: #3498db; /* blue */
  }
  50% { 
    transform: scale(1.1);
    background-color: #f5841f; /* orange */
  }
}


/* 2. Wobble Animation */
.btn-wobble {
  background-color: #e74c3c;
  color: white;
}

.btn-wobble:hover {
  animation: wobble 0.8s;
}

@keyframes wobble {
  0%,
  100% {
    transform: translateX(0%);
  }
  15% {
    transform: translateX(-25%) rotate(-5deg);
  }
  30% {
    transform: translateX(20%) rotate(3deg);
  }
  45% {
    transform: translateX(-15%) rotate(-3deg);
  }
  60% {
    transform: translateX(10%) rotate(2deg);
  }
  75% {
    transform: translateX(-5%) rotate(-1deg);
  }
}

/* 3. Border Reveal */
.btn-border-reveal {
  background-color: transparent;
  color: #9b59b6;
  border: 2px solid #9b59b6;
  position: relative;
}

.btn-border-reveal::after {
  content: "";
  position: absolute;
  width: 0;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #9b59b6;
  transition: width 0.3s ease;
  z-index: -1;
}

.btn-border-reveal:hover::after {
  width: 100%;
}

.btn-border-reveal:hover {
  color: white;
}

/* 4. Rotate 3D */
.btn-rotate-3d {
  background-color: #f39c12;
  color: white;
  perspective: 300px;
  transform-style: preserve-3d;
}

.btn-rotate-3d:hover {
  animation: rotate3d 0.7s;
}

@keyframes rotate3d {
  0% {
    transform: rotateX(0deg);
  }
  50% {
    transform: rotateX(180deg);
  }
  100% {
    transform: rotateX(360deg);
  }
}


/*het code button*/

2. code không đổi màu

/*code button*/
.btn {
  padding: 10px 20px;
    border-radius: 30px;
  margin: 10px;
  border: none;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s ease;
}
.btn a {
    color: #ffffff!important;
}

/* 1. Pulse Animation */
.btn-pulse {
  background-color: #0e94ee;
  color: white;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}




/* 2. Wobble Animation */
.btn-wobble {
  background-color: #e74c3c;
  color: white;
}

.btn-wobble:hover {
  animation: wobble 0.8s;
}

@keyframes wobble {
  0%,
  100% {
    transform: translateX(0%);
  }
  15% {
    transform: translateX(-25%) rotate(-5deg);
  }
  30% {
    transform: translateX(20%) rotate(3deg);
  }
  45% {
    transform: translateX(-15%) rotate(-3deg);
  }
  60% {
    transform: translateX(10%) rotate(2deg);
  }
  75% {
    transform: translateX(-5%) rotate(-1deg);
  }
}

/* 3. Border Reveal */
.btn-border-reveal {
  background-color: transparent;
  color: #9b59b6;
  border: 2px solid #9b59b6;
  position: relative;
}

.btn-border-reveal::after {
  content: "";
  position: absolute;
  width: 0;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #9b59b6;
  transition: width 0.3s ease;
  z-index: -1;
}

.btn-border-reveal:hover::after {
  width: 100%;
}

.btn-border-reveal:hover {
  color: white;
}

/* 4. Rotate 3D */
.btn-rotate-3d {
  background-color: #f39c12;
  color: white;
  perspective: 300px;
  transform-style: preserve-3d;
}

.btn-rotate-3d:hover {
  animation: rotate3d 0.7s;
}

@keyframes rotate3d {
  0% {
    transform: rotateX(0deg);
  }
  50% {
    transform: rotateX(180deg);
  }
  100% {
    transform: rotateX(360deg);
  }
}


/*het code button*/

html

<button class="btn btn-pulse">Pulse Animation</button>
<button class="btn btn-wobble">Wobble</button>
<button class="btn btn-border-reveal">Border Reveal</button>
<button class="btn btn-rotate-3d">Rotate 3D</button>

Css gốc

.btn {
  padding: 10px 20px;
  margin: 10px;
  border: none;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s ease;
}

/* 1. Pulse Animation */
.btn-pulse {
  background-color: #3498db;
  color: white;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/* 2. Wobble Animation */
.btn-wobble {
  background-color: #e74c3c;
  color: white;
}

.btn-wobble:hover {
  animation: wobble 0.8s;
}

@keyframes wobble {
  0%,
  100% {
    transform: translateX(0%);
  }
  15% {
    transform: translateX(-25%) rotate(-5deg);
  }
  30% {
    transform: translateX(20%) rotate(3deg);
  }
  45% {
    transform: translateX(-15%) rotate(-3deg);
  }
  60% {
    transform: translateX(10%) rotate(2deg);
  }
  75% {
    transform: translateX(-5%) rotate(-1deg);
  }
}

/* 3. Border Reveal */
.btn-border-reveal {
  background-color: transparent;
  color: #9b59b6;
  border: 2px solid #9b59b6;
  position: relative;
}

.btn-border-reveal::after {
  content: "";
  position: absolute;
  width: 0;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #9b59b6;
  transition: width 0.3s ease;
  z-index: -1;
}

.btn-border-reveal:hover::after {
  width: 100%;
}

.btn-border-reveal:hover {
  color: white;
}

/* 4. Rotate 3D */
.btn-rotate-3d {
  background-color: #f39c12;
  color: white;
  perspective: 300px;
  transform-style: preserve-3d;
}

.btn-rotate-3d:hover {
  animation: rotate3d 0.7s;
}

@keyframes rotate3d {
  0% {
    transform: rotateX(0deg);
  }
  50% {
    transform: rotateX(180deg);
  }
  100% {
    transform: rotateX(360deg);
  }
}

 

 

 

 

/*code button*/
.btn {
  padding: 10px 20px;
    border-radius: 10px;
  margin: 10px;
  border: none;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s ease;
}
.btn a {
    color: #ffffff!important;
}

/* 1. Pulse Animation */
.btn-pulse {
  background-color: #0e94ee;
  color: white;
  animation: pulse 1.5s infinite;
}






@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(52, 152, 219, 0.7);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 0 10px rgba(52, 152, 219, 0);
  }
}

.pulse {
  animation: pulse-glow 2s infinite;
}




/* 2. Wobble Animation */
.btn-wobble {
  background-color: #e74c3c;
  color: white;
}

.btn-wobble:hover {
  animation: wobble 0.8s;
}

@keyframes wobble {
  0%,
  100% {
    transform: translateX(0%);
  }
  15% {
    transform: translateX(-25%) rotate(-5deg);
  }
  30% {
    transform: translateX(20%) rotate(3deg);
  }
  45% {
    transform: translateX(-15%) rotate(-3deg);
  }
  60% {
    transform: translateX(10%) rotate(2deg);
  }
  75% {
    transform: translateX(-5%) rotate(-1deg);
  }
}

/* 3. Border Reveal */
.btn-border-reveal {
  background-color: transparent;
  color: #9b59b6;
  border: 2px solid #9b59b6;
  position: relative;
}

.btn-border-reveal::after {
  content: "";
  position: absolute;
  width: 0;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #9b59b6;
  transition: width 0.3s ease;
  z-index: -1;
}

.btn-border-reveal:hover::after {
  width: 100%;
}

.btn-border-reveal:hover {
  color: white;
}

/* 4. Rotate 3D */
.btn-rotate-3d {
  background-color: #f39c12;
  color: white;
  perspective: 300px;
  transform-style: preserve-3d;
}

.btn-rotate-3d:hover {
  animation: rotate3d 0.7s;
}

@keyframes rotate3d {
  0% {
    transform: rotateX(0deg);
  }
  50% {
    transform: rotateX(180deg);
  }
  100% {
    transform: rotateX(360deg);
  }
}


/*het code button*/


.btn {
  padding: 10px 20px;
  margin: 10px;
  border: none;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s ease;
}

/* 1. Pulse Animation */
.btn-pulse {
  background-color: #3498db;
  color: white;
  animation: pulse 1.5s infinite;
}
.pulse {
  animation: pulse-animation 2s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
  }
  100% {
    box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
  }
}

 

Code Vinatrain

<a href="https://docs.google.com/forms/d/e/1FAIpQLSekjzRgDvZsogrqQSMrVWVPiAHWcu_yS0jfYSQodzPAU9_RYg/viewform?usp=dialog"><p style="text-align: center;"><button class="btn btn-pulse">📝 TÔI MUỐN ĐƯỢC TƯ VẤN</button></p></a>

 

Nguồn: How to create a pulse animation in CSS | Reactgo

Pulsing Button

Css pulse animation

Css pulse animation

How to create a pulse animation in CSS | Reactgo

CSS Layout – Horizontal & Vertical Align

CSS Button Animations: 40 Ideas to Try + Code Examples

 

 

 


Tags:

«
»
Be the first to write a review

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *