przycisk css javascript

| | | | | | | |

Podczas projektowania witryny internetowej często masz przycisk, który ma wyglądać w określony sposób. Na przykład możesz chcieć, aby przycisk miał kolor tła niż inne elementy na stronie, aby przyciągnąć uwagę użytkownika do przycisku.

Za pomocą CSS programiści mogą tworzyć przyciski ze stylami. CSS umożliwia zmianę między innymi.

kolor, rozmiar tekstu, obramowanie, szerokość i wysokość przycisku. Ten samouczek omówi z przykładami, jak używać serii właściwości CSS do stylizowania kodu HTML przycisk. Zanim skończysz czytać ten samouczek, będziesz ekspertem w stylizacji przycisków za pomocą CSS.

Przegląd przycisków

Możesz zdefiniować przycisk na wiele sposobów HTML. Dwa najpopularniejsze podejścia to Znajdź swój Bootcamp

Jeśli chcemy stylizować nasz przycisk, innymi słowy, aby dostosować wygląd strony, musimy użyć css. W tym artykule omówimy, jak wykonać następujące czynności na przycisku: ..

  • Zmień kolor tła
  • Zmień kolor tekstu
  • Zmień rozmiar tekstu.
  • Dodaj dopełnienie.
  • zaokrąglij rogi.
  • Dodaj kolorową ramkę.
  • Użyj: .... funkcja najechania kursorem
  • Dodaj cień
  • Zmień szerokość
  • wyłącz
  • Animuj ją.

Omówimy również, jak tworzyć grupy przycisków poziomych i pionowych.

Tył - kolor płaszczyzny

Podczas projektowania przycisku pierwszą rzeczą, którą możesz chcieć zrobić, to ustawić kolor tła - plan dla przycisku. Domyślnie przycisk ma białe tło i czarny tekst. Używając koloru tła CSS, c zmienić kolor tła przycisku.

Załóżmy, że projektujesz przycisk dla witryny internetowej i chcesz, aby przycisk miał różowe tło. Możemy zmienić kolor naszego przycisku za pomocą następującego kodu CSS:

Nasz kod zwraca:

Zrzut ekranu 2020 04 03 do 13.10.32

Używając właściwości koloru tła zmieniliśmy kolor tła naszego przycisku na różowy. Za pomocą tej właściwości możemy zmienić kolor tła naszego przycisku na kolor.

Kolor tekstu

Aby zmienić kolor tekstu przycisku, możesz użyć właściwość color. przycisk i chcesz, aby przycisk miał różowe tło, a tekst na zielono. Możemy utworzyć ten przycisk za pomocą następującego kodu:

Nasz kod zwraca:

 ad Dtfk7RIpGyKmzp9eDBrGsFWlOFbIn WMLsfL2IlEEs4TFEHnscuJ3bhsZdx5GEz3zR2bv5Ec3W2eH49suj BISbjhj Ib0gv 4ETJxxUJRp Mxzhop8cvg2 używamy w zielonym rysunku <x> 8gy> 8gy>> używamy właściwości MxzPG8cvG2: do ustawienia koloru tekstu w ou r zielony przycisk.</p><h2>Rozmiar tekstu</h2><p>Możesz użyć właściwości CSS font-size, aby ustawić rozmiar tekstu w przycisku. Załóżmy, że chcemy, aby tekst miał rozmiar czcionki 20 pikseli. Możemy to osiągnąć za pomocą następującego kodu:</p> <p>Nasz kod zwraca:</p><figure class = Zrzut ekranu 2020 03 25 A 08.33.23

Nasz przycisk ma ten sam rozmiar co poprzednio, ale teraz rozmiar znaków wewnątrz to 20px. Użyliśmy atrybutu rozmiaru czcionki, aby ustawić rozmiar tekstu w naszym przycisku.

Padding

Podczas projektowania przycisku możesz zdecydować, że potrzebujesz pewnej ilości miejsca między tekstem wewnątrz przycisku a zewnętrznymi ścianami przycisku. W tym miejscu w grę wchodzi amortyzacja .

Właściwość padding wykorzystuje wskaźniki długości (px, em i tak dalej ) lub wartości procentowe, aby zdefiniować określoną odległość między przyciskami tekstowymi a ich obramowaniami.

Załóżmy, że chcemy utworzyć dwa przyciski na naszej stronie. Jeden przycisk powinien mieć dopełnienie 40 pikseli, a drugi powinien mieć dopełnienie 20px. Możemy utworzyć te przyciski za pomocą następującego kodu:

Nasz kod zwraca:

 Zrzut ekranu 2020 03 25 do 08.39.39

Można użyć właściwości border-radius do tworzenia prostokątnych przycisków z zaokrąglonymi rogami. Oto trzy przykłady kodu, które używają właściwości border-radius. Aby zilustrować efekt różnych rozmiarów promienia, w każdym przykładzie zastosowano inny promień obramowania.

Nasz kod zwraca:

 Zrzut ekranu 2020 03 25 o 08.49.42