* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #5f0f40 0%, #9a1750 100%);
min-height: 100vh;
padding: 40px 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.header {
text-align: center;
color: white;
margin-bottom: 50px;
animation: fadeInDown 0.8s ease;
}
.header h1 {
font-size: 2.8rem;
font-weight: 700;
margin-bottom: 10px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.header p {
font-size: 1.1rem;
opacity: 0.95;
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.container {
max-width: 1400px;
width: 100%;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
margin-bottom: 30px;
}
.button-card {
background: white;
border-radius: 16px;
padding: 40px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
animation: fadeInUp 0.6s ease;
animation-fill-mode: backwards;
}
.button-card:nth-child(1) { animation-delay: 0.1s; }
.button-card:nth-child(2) { animation-delay: 0.2s; }
.button-card:nth-child(3) { animation-delay: 0.3s; }
.button-card:nth-child(4) { animation-delay: 0.4s; }
.button-card:nth-child(5) { animation-delay: 0.5s; }
.button-card:nth-child(6) { animation-delay: 0.6s; }
.button-card:nth-child(7) { animation-delay: 0.7s; }
.button-card:nth-child(8) { animation-delay: 0.8s; }
.button-card:nth-child(9) { animation-delay: 0.9s; }
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.button-title {
font-size: 1.1rem;
color: #2c3e50;
font-weight: 700;
text-align: center;
}
/* Close Button 1: Classic X */
.close-btn-1 {
width: 60px;
height: 60px;
background: #5f0f40;
border: none;
border-radius: 50%;
cursor: pointer;
position: relative;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(95, 15, 64, 0.3);
}
.close-btn-1::before,
.close-btn-1::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 24px;
height: 3px;
background: white;
transition: all 0.3s ease;
}
.close-btn-1::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.close-btn-1::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.close-btn-1:hover {
background: #9a1750;
transform: rotate(90deg) scale(1.1);
box-shadow: 0 6px 25px rgba(95, 15, 64, 0.5);
}
/* Close Button 2: Rotating X */
.close-btn-2 {
width: 60px;
height: 60px;
background: transparent;
border: 3px solid #5f0f40;
border-radius: 50%;
cursor: pointer;
position: relative;
transition: all 0.4s ease;
}
.close-btn-2::before,
.close-btn-2::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 24px;
height: 3px;
background: #5f0f40;
transition: all 0.4s ease;
}
.close-btn-2::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.close-btn-2::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.close-btn-2:hover {
background: #5f0f40;
transform: rotate(180deg);
border-color: #5f0f40;
}
.close-btn-2:hover::before,
.close-btn-2:hover::after {
background: white;
}
/* Close Button 3: Pulse Effect */
.close-btn-3 {
width: 60px;
height: 60px;
background: #5f0f40;
border: none;
border-radius: 12px;
cursor: pointer;
position: relative;
transition: all 0.3s ease;
}
.close-btn-3::before,
.close-btn-3::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 24px;
height: 3px;
background: white;
transition: all 0.3s ease;
}
.close-btn-3::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.close-btn-3::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.close-btn-3:hover {
animation: pulse 0.6s ease;
box-shadow: 0 0 0 15px rgba(95, 15, 64, 0);
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(95, 15, 64, 0.7);
}
100% {
box-shadow: 0 0 0 20px rgba(95, 15, 64, 0);
}
}
/* Close Button 4: Scale & Fade */
.close-btn-4 {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #5f0f40 0%, #9a1750 100%);
border: none;
border-radius: 50%;
cursor: pointer;
position: relative;
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
box-shadow: 0 4px 15px rgba(95, 15, 64, 0.3);
}
.close-btn-4::before,
.close-btn-4::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 24px;
height: 3px;
background: white;
transition: all 0.3s ease;
}
.close-btn-4::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.close-btn-4::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.close-btn-4:hover {
transform: scale(1.3);
box-shadow: 0 8px 30px rgba(95, 15, 64, 0.5);
}
.close-btn-4:hover::before {
width: 30px;
}
.close-btn-4:hover::after {
width: 30px;
}
/* Close Button 5: Slide Lines */
.close-btn-5 {
width: 60px;
height: 60px;
background: white;
border: 3px solid #5f0f40;
border-radius: 50%;
cursor: pointer;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.close-btn-5::before,
.close-btn-5::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 3px;
background: #5f0f40;
transition: all 0.4s ease;
}
.close-btn-5::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.close-btn-5::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.close-btn-5:hover {
background: #5f0f40;
border-color: #5f0f40;
}
.close-btn-5:hover::before,
.close-btn-5:hover::after {
width: 24px;
background: white;
}
/* Close Button 6: 3D Flip */
.close-btn-6 {
width: 60px;
height: 60px;
background: #5f0f40;
border: none;
border-radius: 10px;
cursor: pointer;
position: relative;
transition: all 0.5s ease;
transform-style: preserve-3d;
}
.close-btn-6::before,
.close-btn-6::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 24px;
height: 3px;
background: white;
transition: all 0.3s ease;
}
.close-btn-6::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.close-btn-6::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.close-btn-6:hover {
transform: rotateY(180deg);
background: #9a1750;
}
/* Close Button 7: Bounce */
.close-btn-7 {
width: 60px;
height: 60px;
background: #5f0f40;
border: none;
border-radius: 50%;
cursor: pointer;
position: relative;
transition: all 0.3s ease;
}
.close-btn-7::before,
.close-btn-7::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 24px;
height: 3px;
background: white;
}
.close-btn-7::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.close-btn-7::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.close-btn-7:hover {
animation: bounce 0.6s ease;
}
@keyframes bounce {
0%, 100% { transform: scale(1); }
25% { transform: scale(0.9); }
50% { transform: scale(1.15); }
75% { transform: scale(0.95); }
}
/* Close Button 8: Glow */
.close-btn-8 {
width: 60px;
height: 60px;
background: #5f0f40;
border: none;
border-radius: 50%;
cursor: pointer;
position: relative;
transition: all 0.3s ease;
}
.close-btn-8::before,
.close-btn-8::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 24px;
height: 3px;
background: white;
transition: all 0.3s ease;
}
.close-btn-8::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.close-btn-8::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.close-btn-8:hover {
box-shadow: 0 0 20px #5f0f40,
0 0 40px #5f0f40,
0 0 60px #5f0f40;
transform: scale(1.1);
}
/* Close Button 9: Morphing Circle */
.close-btn-9 {
width: 60px;
height: 60px;
background: #5f0f40;
border: none;
border-radius: 50%;
cursor: pointer;
position: relative;
transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.close-btn-9::before,
.close-btn-9::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 24px;
height: 3px;
background: white;
transition: all 0.4s ease;
}
.close-btn-9::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.close-btn-9::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.close-btn-9:hover {
border-radius: 10px;
transform: rotate(90deg);
background: #9a1750;
}
/* Close Button 10: Split & Slide */
.close-btn-10 {
width: 60px;
height: 60px;
background: #5f0f40;
border: none;
border-radius: 50%;
cursor: pointer;
position: relative;
transition: all 0.3s ease;
overflow: hidden;
}
.close-btn-10::before,
.close-btn-10::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 24px;
height: 3px;
background: white;
transition: all 0.4s ease;
}
.close-btn-10::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.close-btn-10::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.close-btn-10:hover::before {
transform: translate(-100%, -50%) rotate(45deg);
}
.close-btn-10:hover::after {
transform: translate(0%, -50%) rotate(-45deg);
}
.close-btn-10:hover {
background: #9a1750;
}
/* Close Button 11: Ripple Effect */
.close-btn-11 {
width: 60px;
height: 60px;
background: #5f0f40;
border: none;
border-radius: 50%;
cursor: pointer;
position: relative;
overflow: hidden;
}
.close-btn-11::before,
.close-btn-11::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 24px;
height: 3px;
background: white;
z-index: 2;
}
.close-btn-11::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.close-btn-11::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.close-btn-11:hover::before {
animation: ripple 0.6s ease;
}
@keyframes ripple {
0% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
}
100% {
box-shadow: 0 0 0 30px rgba(255, 255, 255, 0);
}
}
/* Close Button 12: Shake */
.close-btn-12 {
width: 60px;
height: 60px;
background: #5f0f40;
border: none;
border-radius: 50%;
cursor: pointer;
position: relative;
}
.close-btn-12::before,
.close-btn-12::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 24px;
height: 3px;
background: white;
}
.close-btn-12::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.close-btn-12::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.close-btn-12:hover {
animation: shake 0.5s ease;
background: #9a1750;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
20%, 40%, 60%, 80% { transform: translateX(5px); }
}
@media (max-width: 768px) {
.header h1 {
font-size: 2rem;
}
.grid {
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px;
}
.button-card {
padding: 30px;
}
}
No comments yet. Be the first!