كود CSS لتحريك الزر حركة أفقية دائمة:
<style>
@keyframes moveButton {
0% {
transform: translateX(0);
}
50% {
transform: translateX(10px);
}
100% {
transform: translateX(0);
}
}
.button.single-submit {
animation: moveButton 2s infinite ease-in-out;
}
</style>
كود CSS لتحريك الزر حركة اهتزاز:
<style>
@keyframes shakeButton {
0%, 100% {
transform: translateX(0);
}
25% {
transform: translateX(-5px);
}
50% {
transform: translateX(5px);
}
75% {
transform: translateX(-5px);
}
}
.button.single-submit {
animation: shakeButton 1.5s infinite;
}
</style>
كود CSS لتحريك الزر حركة عمودية دائمة:
<style>
@keyframes bounceButton {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
.button.single-submit {
animation: bounceButton 2s infinite ease-in-out;
}
</style>
كود CSS لتأثير اللمعة البيضاء:
<style>
.button.single-submit {
position: relative;
display: inline-block;
padding: 10px 20px;
font-size: 16px;
font-weight: bold;
color: #fff;
background-color: #007bff;
border: none;
border-radius: 5px;
overflow: hidden;
cursor: pointer;
}
.button.single-submit::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
transform: skewX(-25deg);
transition: opacity 0.3s;
animation: shineEffect 2s infinite;
}
@keyframes shineEffect {
0% {
left: -100%;
}
100% {
left: 100%;
}
}
</style>