css - Making a "Pressed" effect on a Panel using Angular bootstrap Version 0.13.4 -

i plan have grid of 6 rectangle panels, (3 x 2). each panel act button open different module within system. looking effect on mouseover or hover apply each panel user can tell panel being interacted before click panel. (it show them clickable , not read data). example, give panel "pressed" effect before panel being clicked nice. (i open other suggestions).

i using angular bootstrap version 0.13.4.

here code panel applying to:

<div         data-ng-if="vb.isauthorized('role_staff','role_srprofessor')">         <div class="panel panel-default panelattributes panel-snap"             data-ng-click="vb.change('classmodule')">             <div class="panel-body" id="content">                 <div class="row col-md-12">                     <img src="/webcontent/img/shape@3x.png" alt=""                         class="img-responsive resize" /> <br> <span                         class="classtext placement">class module</span>                 </div>                 <div class="col-md-6">                     <p class="numericaltext divcontent">5</p>                     <p class="infotext divcontent">community colleges</p>                 </div>                 <div class="col-md-6">                     <p class="numericaltext divcontent">28</p>                     <p class="infotext divcontent">counties <br>served</p>                 </div>             </div>         </div>     </div> 

please let me know of suggestions! not sure design conventions expect things this, wanted see ideas here might have.

i using shadow effect:

.panel-snap {     background-image: -webkit-linear-gradient(top, #ff5a00, #ffae00);     background-image: -moz-linear-gradient(top, #ff5a00 0%, #ffae00 100%);     background-image: -ms-linear-gradient(top, #ff5a00 0%, #ffae00 100%);     background-image: -o-linear-gradient(top, #ff5a00 0%, #ffae00 100%);     background-image: linear-gradient(top, #ff5a00 0%, #ffae00 100%);     box-shadow: 3px 3px 5px 6px #a9a9a9; } 

feel free let me know of questions, thanks!

this purely choice, of course there patterns can follow. google material popular (for reason) perhaps can inspiration here starting point. resource quick inspiration @ codedrops.

i use sass or less lighten/darken 10% hover events. way can set master color , manipulate in precise , consistent ways. use mixin.

personally, think less more when comes interactivity, it's down experience intend give user.

it comes down design process, choosing these design patterns can lengthy , involved process. designers can agonise on process extensively.

i keep listing design suggestions google friend on one, research , inspired. alternatively isolate element in codepen , play around it. can fun experimenting different styles , animation combinations.