Przycisk na stronie internetowej to nie tylko element interakcji, ale także ważna część projektu, która wpływa na postrzeganie Twojej marki przez użytkownika. W tym artykule pokażemy, jak stworzyć nowoczesny przycisk z animacją i zaokrąglonymi krawędziami za pomocą HTML i CSS.
1. Podstawowa struktura HTML przycisku
Stworzymy prosty przycisk w HTML w pliku index.html
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Przycisk animowany</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button class="animated-button">Kliknij mnie</button>
</body>
</html>
2. Style CSS dla przycisku (plik styles.css)
Stworzymy stylowy wygląd przycisku z animacją w pliku styles.css
/* Podstawowy styl przycisku */
.animated-button {
background-color: #E50914; /* Czerwone tło */
color: #FFFFFF; /* Biały tekst */
border: none; /* Bez ramki */
border-radius: 50px; /* Zaokrąglone krawędzie */
padding: 10px 20px; /* Wewnętrzne odstępy */
font-size: 16px; /* Rozmiar tekstu */
font-family: 'Arial', sans-serif; /* Czcionka */
cursor: pointer; /* Zmiana kursora na "rękę" */
transition: all 0.3s ease; /* Płynne przejście dla animacji */
}
/* Animacja po najechaniu */
.animated-button:hover {
background-color: #FFFFFF; /* Zmiana tła */
color: #E50914; /* Zmiana koloru tekstu */
transform: scale(1.1); /* Powiększenie przycisku */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Cień */
}
3. Dodanie efektu naciśnięcia w pliku styles.css
Dodamy efekt naciśnięcia, aby przycisk wyglądał realistycznie.
/* Efekt naciśnięcia */
.animated-button:active {
transform: scale(0.95); /* Zmniejszenie przycisku */
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Zmniejszenie cienia */
}
4. Wynik
Po najechaniu kursorem przycisk zmienia kolor, rozmiar i dodaje cień, a po kliknięciu lekko się zmniejsza, tworząc efekt naciśnięcia.
(Przycisk z animacją i zaokrąglonymi krawędziami dla strony internetowej)
(Przycisk z animacją i zaokrąglonymi krawędziami dla strony internetowej po najechaniu kursorem)
Wnioski
Przycisk z animacją i zaokrąglonymi krawędziami dodaje stronie nowoczesności i interaktywności. Nie tylko przyciąga użytkowników, ale także poprawia ogólne wrażenie z projektu.