CSS: تأثير ظل عند تمرير المؤشر

«كيف تنشئ تأثير ظل عند تمرير المؤشر فوق صندوق؟»

عرض توضيحي: كيف يبدو

HTML

<div class="button-pop">TRY HOVERING OVER THE BOX!</div> 

CSS

.button-pop {
    border: 2px solid black;
    padding: 1rem; 
    width:200px;
    height:200px;
}
.button-pop:hover {
    position: relative;
    right: 5px;
    bottom: 5px;
    box-shadow: 7px 7px #111;
}

الأمر بسيط إلى حد كبير. استمتع بالبرمجة!