در این آموزش از آکادمی تیچرنت، شما یاد خواهید گرفت که چگونه با استفاده از CSS یک دکمه جذاب با افکت نورانی و چرخشی رنگینکمانی در صفحههای وب ایجاد کنید. این تکنیک به شما امکان میدهد تا دکمههایی با ظاهر خاص و انیمیشنهای چشمنواز بسازید که میتوانند تجربه کاربری وبسایت شما را جذابتر و حرفهایتر کنند.
کد مورد استفاده در آموزش دکمه رنگی نورانی متحرک
/* keeps the button on top of the glow */ .galactic-button { z-index: 1; } /* css for the glowing effect */ .galactic-button:before { content: ''; position: absolute; z-index: -1; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; /* adjust the width and height keeping them both the same size */ width: 200px; height: 200px; /* adjust the colors here */ background: conic-gradient(from 0deg, #ff007f, #ffbf00, #00ffbf, #00d4ff, #ff007f); /* adjust the speed of the animation */ animation: swirl 3s infinite linear; /* adjust the blur */ filter: blur(50px); /* adjust the opacity */ opacity: 0.5; } /* Swirl Animation */ @keyframes swirl { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } }