Ya debería estar resuelta esta duda, pero como tengo algo de tiempo, creo que es bueno ampliarla para que entiendas o entiendan los que leen esto:
Los selectores de css, no afectan en la especificación actual CSS3, a los ancestros, sino a: hermanos y anidaciones.
Existen formas de evadir esta regla, pero complica el html y no viene al tema (me refiero a los enlaces y el
selector :target o el hack de la relación entre
inputs y labels).
Habiendo dicho esto en
librosweb y
w3school puedes encontrar que los selectores:
~ --> Afecta a cualquier elementos del DOM al mismo nivel de anidación.
+ --> Afecta sólo al elemento siguiente en el mismo nivel de anidación.
Y
> afecta sólo a los hijos anidados, pero no a los
"nietos".
Ahora el efecto que quieres lograr, estéticamente se puede emular solo con el botón, al menos es similar al ejercicio que propone Rafael:
Código CSS:
Ver originalbutton{
box-shadow: 0 0 0 25px black;
transition: all ease .5s;
}
button:hover{
box-shadow: 0 0 0 35px black;
}