Przyciski CSS

Uczenie się, jak ustawiać style przycisków za pomocą CSS.

Podstawowy styl przycisku

Rozłóż przyciski w pionie, a nie poziomo:

Przykład
  kolor_tła: #4CAF50; /* Zielony */
  border: none;
  kolor: biały;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
display: block;

Spróbuj sam

Kolor przycisku

Użyj background-color Atrybut zmienia kolor tła przycisku:

Rozłóż przyciski w pionie, a nie poziomo:

.button1 {background-color: #4CAF50;} /* Zielony */
.button2 {background-color: #008CBA;} /* Niebieski */
.button3 {background-color: #f44336;} /* Czerwony */ 
.button4 {background-color: #e7e7e7; color: black;} /* Szary */ 
.button5 {background-color: #555555;} /* Czarny */

Spróbuj sam

Rozmiar przycisku

Użyj font-size Atrybut zmienia rozmiar czcionki przycisku:

Rozłóż przyciski w pionie, a nie poziomo:

.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}

Spróbuj sam

Użyj padding Atrybut zmienia wewnętrzną przestrzeń przycisku:

Rozłóż przyciski w pionie, a nie poziomo:

.button1 {padding: 10px 24px;}
.button2 {padding: 12px 28px;}
.button3 {padding: 14px 40px;}
.button4 {padding: 32px 16px;}
.button5 {padding: 16px;}

Spróbuj sam

Zaokrąglony przycisk

Użyj border-radius Atrybut dodaje zaokrąglone krawędzie przycisku:

Rozłóż przyciski w pionie, a nie poziomo:

.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {promień_krawędzi: 12px;}
.button5 {promień_krawędzi: 50%;}

Spróbuj sam

Kolorowa krawędź przycisku

Użyj Grupy przycisków z obramowaniem Atrybut dodaje kolorową krawędź przycisku:

Rozłóż przyciski w pionie, a nie poziomo:

.button1 {
  kolor_tła: biały;
  kolor: czarny;
  graniczka: 2px solid #4CAF50; /* Zielony */
display: block;
...

Spróbuj sam

Przyciski przewijalne


Kiedy kursor przechodzi nad przyciskiem, użyj :hover Wybór selectora zmienia styl przycisku.

Wskazówka:Użyj czas_przejścia Atrybut określa szybkość efektu "najechania":

Rozłóż przyciski w pionie, a nie poziomo:

Przykład
  czas_przejścia: 0.4s;
display: block;
.button:hover {
  kolor_tła: #4CAF50; /* Zielony */
  kolor: biały;
display: block;
...

Spróbuj sam

Cieniowany przycisk

Użyj cień Atrybut dodaje cień do przycisku:

Rozłóż przyciski w pionie, a nie poziomo:

.button1 {
  cień: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
display: block;
.button2:hover {
  cień: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
display: block;

Spróbuj sam

Przycisk wyłączony

Użyj przeźroczystość Atrybut przeźroczystości przycisku (tworzy wygląd "wyłączony").

Wskazówka:Możesz również dodać atrybut z wartością "niedozwolony" kursor Atrybut, który wyświetla "znak zakazu parkowania" (zakaz postoju) po umieszczeniu kursora na przycisku:

Rozłóż przyciski w pionie, a nie poziomo:

.disabled {
  przeźroczystość: 0.6;
  kursor: niedozwolony;
display: block;

Spróbuj sam

szerokość przycisku


Domyślnie, rozmiar przycisku zależy od jego treści (jest taki sam jak szerokość treści). Użyj szerokość Aby zmienić szerokość przycisku, użyj atrybutu:

Rozłóż przyciski w pionie, a nie poziomo:

.button1 {szerokość: 250px;}
.button2 {szerokość: 50%;}
.button3 {szerokość: 100%;}

Spróbuj sam

Grupowanie przycisków

　

Usuń marginesy i dodaj szerokość do każdego przycisku Zastąp

Rozłóż przyciski w pionie, a nie poziomo:

Przykład
  Atrybutu
display: block;

Spróbuj sam

do tworzenia grup przycisków:

　

Grupy przycisków w pionie Grupy przycisków z obramowaniem border

Rozłóż przyciski w pionie, a nie poziomo:

Przykład
  Atrybutu
  float: left;
display: block;

Spróbuj sam

border: 1px solid green;

Grupy przycisków w pionie Użyj display:block Zastąp float:left

Rozłóż przyciski w pionie, a nie poziomo:

Przykład
  .button {
display: block;

Spróbuj sam

}

Kawa

Spróbuj sam

Przycisk

Przyciski animacyjne

Przykład 1

Spróbuj sam

Podświetlenie myszy

Przykład 2

Spróbuj sam

Dodaj efekt "naciśnięcia przycisku

Przykład 3

Spróbuj sam

Przykład 4

Dodaj efekt "fale

Spróbuj sam