.mybutton {
display: inline-block;
justify-content: center;
align-items: center;
background-color: #e00d0d;
color: #ffffff !important;
text-align: center;
text-decoration: none;
border-radius: 20px;
font-family: Arial, sans-serif;
font-size: 1.5em;
font-weight: bold;
padding: 20px 40px;
width: 80%;
transition: all 0.3s ease;
animation: pulse 1.5s infinite;
cursor: pointer;
border: none;
box-shadow: 0 4px 12px rgba(255, 77, 77, 0.3), inset 0 0 10px rgba(0, 0, 0, 0.2);
position: relative;
overflow: hidden;
}
.mybutton:hover {
background-color: #ffeb3b;
color: #ffffff;
transform: scale(1.1);
box-shadow: 0 8px 16px rgba(255, 128, 0, 0.4), inset 0 0 15px rgba(0, 0, 0, 0.2);
}
.mybutton:active {
background-color: #e60000;
transform: scale(0.95);
box-shadow: 0 4px 12px rgba(230, 0, 0, 0.3), inset 0 0 10px rgba(0, 0, 0, 0.2);
}
.mybutton::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1), transparent 60%);
transform: translate(-50%, -50%) scale(0);
opacity: 0;
transition: transform 0.5s ease, opacity 0.5s ease;
}
.mybutton:hover::before {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
.mybutton::after {
content: ' 👉바로가기👈';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 1.5em;
color: #ffffff;
background: rgb(252, 118, 0);
padding: 5px 10px;
border-radius: 10px;
opacity: 0;
transition: top 0.3s ease, opacity 0.3s ease;
}
.mybutton:hover::after {
top: 50%;
opacity: 1;
}
.mybutton:hover span {
opacity: 0;
transform: scale(0.8);
}
.mybutton span {
transition: opacity 0.3s ease, transform 0.3s ease;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
@media (max-width: 768px) {
.mybutton {
font-size: 1.2em;
padding: 15px 30px;
border-radius: 15px;
}
.mybutton:hover {
transform: none;
box-shadow: 0 4px 12px rgba(255, 128, 0, 0.4), inset 0 0 10px rgba(0, 0, 0, 0.2);
}
.mybutton:hover::before {
transform: translate(-50%, -50%) scale(1.1);
}
.mybutton::after {
font-size: 1em;
}
.mybutton:hover::after {
top: 55%;
}
}
