Jak to zrobić? Button on hover podświetlenie

Witam,
zastanawiam się jak jest zrobiony efekt na podświetlenia przycisku cień przy najechaniu na niego myszką na stronie:
http://www.w3schools.com/css/css_inline-block.asp
Sprawdzam w inspektorze, nie ma ustawionej właściwości :hover
Sprawdzam w Event Listeners może js lub JQuery a tu nic nie ma ustawionego...

Jestem bardzo ciekawy jak można podejrzeć jak autor to zrobił na swojej stronie, żeby się nauczyć i wiedzieć.
Pozdrawia
Piotr

w inspektorze po kliknieciu prawym przyciskiem myszy mozesz zmienic stan elementu (np hover, active, focus...) i wtedy podejrzec wyglad i style

tutaj: {box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);}

Dziękuje to jest dobra wskazówka, ja jednak coś nadal źle robię.

W Chromie najeżdżam myszką na button i w inspektorze Styles widzę wiele ustawień css,
ale dotyczącą hover jest jedna i ona nie odpowiada ze ten ładny efekt:

 
.w3-white, .w3-hover-white:hover {
    color: #000!important;
    background-color: #fff!important;
}

Wchodzę sobie na Computed i w filtrze wpisuje hover - to nic nie wyświetla.
Pozdrawia
Piotr

Hej.
Trzymaj gotowy przykład:

<a href="#" class="btn">Read More</a>

.btn {
  display: inline-block;
  padding: 12px 24px;
  background-color: #4CAF50;
  color: #fff;
  font-size: 25px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  outline: 0;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.btn:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}

https://jsfiddle.net/e488eh9m/

5!

jak zwykle wystarczy odpowiednio zapytać google, czyli w tym przypadku: button generator

rasialdo_32 napisał(a):

w inspektorze po kliknieciu prawym przyciskiem myszy mozesz zmienic stan elementu (np hover, active, focus...) i wtedy podejrzec wyglad i style

tutaj: {box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);}

Dziękuje, ale ja tego box-shadow nie widzę w inspektorze...
Nie widzę też :hover
jest tu tylko i to nie da efektu cienia pod przyciskiem.

.w3-white, .w3-hover-white:hover {
    color: #000!important;
    background-color: #fff!important;
} 

Zrobiłem zrzut ekranu jak to wygląda w inspektorze.
https://www.easypaste.org/file/VN8cbuwz/hover.png?lang=pl

czysteskarpety napisał(a):

jak zwykle wystarczy odpowiednio zapytać google, czyli w tym przypadku: button generator

Nie o to mi chodzi żeby znaleźć gotowy generator - ja mam pytanie jak to jest zrobione, jak sprawdzić w inspektorze.

u mnie pokazuje w zakładce animacja

Łopatologicznie:

Prawy przycisk myszy na element:
<a class="w3-right w3-btn" href="css_align.asp">Next ❯</a>

zaznacz: :hover

szukaj na liscie ze stylami:

 .w3-btn:hover, .w3-btn-block:hover, .w3-btn-floating:hover, .w3-btn-floating-large:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
} 

Tak to jest dobre wyjaśnienie, trzeba ustawić "force element state" - dopiero wtedy ten styl się pojawi na liście.
Dziękuje i pozdrawiam