button {
font-size: 16px;
padding: 10px 20px;
border: none;
cursor: pointer;
margin: 10px;
border-radius: 5px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
/* Nút 1: Hiệu ứng Nảy */
.muathemewpgiare-1 {
background-color: #e74c3c;
color: white;
}
.muathemewpgiare-1:hover {
animation: bounce 0.5s;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-10px);
}
60% {
transform: translateY(-5px);
}
}
/* Nút 2: Hiệu ứng Chuyển Màu Xoay */
.muathemewpgiare-2 {
background: linear-gradient(135deg, #8e44ad, #3498db);
color: white;
}
.muathemewpgiare-2:hover {
animation: rotate 1s linear infinite;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Nút 3: Hiệu ứng Lắc */
.muathemewpgiare-3 {
background-color: #f39c12;
color: white;
}
.muathemewpgiare-3:hover {
animation: wobble 1s;
}
@keyframes wobble {
0% { transform: translate(0); }
15% { transform: translate(-5px, 0); }
30% { transform: translate(5px, 0); }
45% { transform: translate(-5px, 0); }
60% { transform: translate(5px, 0); }
75% { transform: translate(-5px, 0); }
100% { transform: translate(0); }
}
/* Nút 4: Hiệu ứng Lửa */
.muathemewpgiare-4 {
background-color: #2ecc71;
color: white;
}
.muathemewpgiare-4:hover {
animation: flame 0.5s infinite alternate;
}
@keyframes flame {
0% { transform: scale(1); }
100% { transform: scale(1.1); }
}
/* Nút 5: Hiệu ứng Chơi */
.muathemewpgiare-5 {
background-color: #3498db;
color: white;
}
.muathemewpgiare-5:hover {
animation: shake 0.5s;
}
@keyframes shake {
0% { transform: translateX(0); }
25% { transform: translateX(-5px); }
50% { transform: translateX(5px); }
75% { transform: translateX(-5px); }
100% { transform: translateX(0); }
}
/* Nút 6: Bọt Bong Bóng */
.muathemewpgiare-6 {
background-color: #9b59b6;
color: white;
}
.muathemewpgiare-6:hover {
animation: bubble 1s forwards;
}
@keyframes bubble {
0% { transform: scale(1); }
100% { transform: scale(1.2); }
}
/* Nút 7: Hiệu ứng Nảy */
.muathemewpgiare-7 {
background-color: #e67e22;
color: white;
}
.muathemewpgiare-7:hover {
animation: bounce 0.5s;
}
/* Nút 8: Hiệu ứng Bóng */
.muathemewpgiare-8 {
background-color: #f1c40f;
color: white;
}
.muathemewpgiare-8:hover {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.3);
}
/* Nút 9: Hiệu ứng Neon Mộng Mơ */
.muathemewpgiare-9 {
background-color: #1abc9c;
color: white;
}
.muathemewpgiare-9:hover {
box-shadow: 0 0 20px #1abc9c, 0 0 30px #1abc9c;
}
/* Nút 10: Mũi Tên Di Chuyển */
.muathemewpgiare-10 {
background-color: #e74c3c;
color: white;
}
.muathemewpgiare-10:hover {
animation: arrow 1s forwards;
}
@keyframes arrow {
0% { transform: translateX(0); }
100% { transform: translateX(10px); }
}
/* Nút 11: Sắc Màu Chuyển */
.muathemewpgiare-11 {
background: linear-gradient(135deg, #ff9a00, #ff5f6d);
color: white;
}
.muathemewpgiare-11:hover {
filter: brightness(1.1);
}
/* Nút 12: Hiệu ứng Kim Cương */
.muathemewpgiare-12 {
background-color: #34495e;
color: white;
}
.muathemewpgiare-12:hover {
animation: glitter 1s forwards;
}
@keyframes glitter {
0% { background-color: #34495e; }
50% { background-color: #2ecc71; }
100% { background-color: #34495e; }
}
/* Nút 13: Hiệu ứng Zic-Zac */
.muathemewpgiare-13 {
background-color: #9b59b6;
color: white;
}
.muathemewpgiare-13:hover {
animation: zigzag 1s forwards;
}
@keyframes zigzag {
0%, 100% { transform: translateY(0); }
25% { transform: translateY(-5px); }
50% { transform: translateY(5px); }
}
/* Nút 14: Hiệu ứng Cười */
.muathemewpgiare-14 {
background-color: #f39c12;
color: white;
}
.muathemewpgiare-14:hover {
animation: smile 1s forwards;
}
@keyframes smile {
0% { transform: translateY(0); }
50% { transform: translateY(-5px); }
100% { transform: translateY(0); }
}
/* Nút 15: Hiệu ứng Rơi Dọc */
.muathemewpgiare-15 {
background-color: #16a085;
color: white;
}
.muathemewpgiare-15:hover {
animation: verticalBounce 0.5s forwards;
}
@keyframes verticalBounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
/* Nút 16: Hiệu ứng Vô Tận */
.muathemewpgiare-16 {
background-color: #2980b9;
color: white;
}
.muathemewpgiare-16:hover {
animation: infinite 1s infinite;
}
@keyframes infinite {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
/* Nút 17: Tia Sáng */
.muathemewpgiare-17 {
background-color: #8e44ad;
color: white;
}
.muathemewpgiare-17:hover {
animation: light 1s forwards;
}
@keyframes light {
0% { box-shadow: 0 0 10px #8e44ad; }
100% { box-shadow: 0 0 30px #8e44ad; }
}
/* Nút 18: Hiệu ứng Xoáy */
.muathemewpgiare-18 {
background-color: #e67e22;
color: white;
}
.muathemewpgiare-18:hover {
animation: spiral 1s forwards;
}
@keyframes spiral {
0% { transform: rotate(0); }
100% { transform: rotate(360deg); }
}
/* Nút 19: Sắc Màu */
.muathemewpgiare-19 {
background-color: #f1c40f;
color: white;
}
.muathemewpgiare-19:hover {
background: linear-gradient(135deg, #e67e22, #e74c3c);
}
/* Nút 20: Hiệu ứng Sóng */
.muathemewpgiare-20 {
background-color: #2ecc71;
color: white;
}
.muathemewpgiare-20:hover {
animation: wave 1s forwards;
}
@keyframes wave {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(-10px); }
}
/* Nút 21: Bóng Nổi */
.muathemewpgiare-21 {
background-color: #3498db;
color: white;
}
.muathemewpgiare-21:hover {
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
/* Nút 22: Tia Nắng Mặt Trời */
.muathemewpgiare-22 {
background-color: #9b59b6;
color: white;
}
.muathemewpgiare-22:hover {
animation: sunray 1s forwards;
}
@keyframes sunray {
0% { box-shadow: 0 0 10px #9b59b6; }
100% { box-shadow: 0 0 30px #9b59b6; }
}
/* Nút 23: Hiệu ứng Biến Mất và Xuất Hiện */
.muathemewpgiare-23 {
background-color: #e74c3c;
color: white;
}
.muathemewpgiare-23:hover {
animation: fadein 1s forwards;
}
@keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}
/* Nút 24: Hiệu ứng Phóng To Dần */
.muathemewpgiare-24 {
background-color: #f39c12;
color: white;
}
.muathemewpgiare-24:hover {
animation: grow 0.5s forwards;
}
@keyframes grow {
0% { transform: scale(1); }
100% { transform: scale(1.1); }
}
/* Nút 25: Cơn Lũ Màu */
.muathemewpgiare-25 {
background-color: #16a085;
color: white;
}
.muathemewpgiare-25:hover {
animation: flood 1s forwards;
}
@keyframes flood {
0% { background-color: #16a085; }
100% { background-color: #1abc9c; }
}
/* Nút 26: Hiệu ứng Rung */
.muathemewpgiare-26 {
background-color: #2980b9;
color: white;
}
.muathemewpgiare-26:hover {
animation: jolt 0.5s forwards;
}
@keyframes jolt {
0% { transform: translateX(0); }
100% { transform: translateX(10px); }
}
/* Nút 27: Hiệu ứng Nhảy */
.muathemewpgiare-27 {
background-color: #8e44ad;
color: white;
}
.muathemewpgiare-27:hover {
animation: jump 0.5s forwards;
}
@keyframes jump {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-15px); }
}
/* Nút 28: Sóng Nhẹ */
.muathemewpgiare-28 {
background-color: #f1c40f;
color: white;
}
.muathemewpgiare-28:hover {
animation: ripple 1s forwards;
}
@keyframes ripple {
0% { transform: scale(1); }
100% { transform: scale(1.5); }
}
/* Nút 29: Nổ Sắc Màu */
.muathemewpgiare-29 {
background-color: #e74c3c;
color: white;
}
.muathemewpgiare-29:hover {
animation: explosion 0.5s forwards;
}
@keyframes explosion {
0% { transform: scale(1); }
100% { transform: scale(1.2); }
}
/* Nút 30: Hiệu ứng Ngã */
.muathemewpgiare-30 {
background-color: #2ecc71;
color: white;
}
.muathemewpgiare-30:hover {
animation: trip 1s forwards;
}
@keyframes trip {
0% { transform: translateY(0); }
100% { transform: translateY(-5px); }
}
![[Thủ thuật css] Hiệu ứng chữ tráng gương wordpress](https://muathemewpgiare.com/wp-content/uploads/2025/01/hieu-ung-chu-trang-guong-muathemewpgiare.jpg "[Thủ thuật css] Hiệu ứng chữ tráng gương wordpress")
