A Pen by Joe.

index.jade

.mouse-container
  .mouse
    .button

Mouse-Scroll-Notify.markdown

Mouse Scroll Notify

Handy dandy CSS3 only notifier that a person is supposed to scroll to see something happen.

The coolest part of this is that by using REM size units and percentages you can easily size this mouse by changing the WIDTH value of the mouse-container class.

A Pen by Joe on CodePen.

License.

style.stylus

.mouse-container
  $w = 3rem
  $h = $w * 1.65
  $radius = 999px
  
  position: absolute
  bottom: 20px
  right: 20px
  width: $w
  height: $h

  .mouse
    position: relative
    border-radius: $radius
    background: #fff
    width: 98%
    height: 98%
    margin: 1% auto
    box-shadow: inset 0 -.5em 2em #666
    text-align: center      
    .button
      $w = 10%
      display: inline-block
      position: relative
      top: 15%
      width: $w
      padding: 10% 0
      border-radius: $radius
      box-shadow: inset 0 0 .5em rgba(0,0,0,.5), 0 .25em .25em #ccc
      animation: pulse 2s infinite


@-webkit-keyframes pulse 
  0%    
    background: #ccc
    box-shadow: 0 0 1em rgba(255,0,0,0)
  50%   
    background: #cc0000
    box-shadow: 0 0 1em rgba(255,0,0,1)
  100%  
    background: #ccc
    box-shadow: 0 0 1em rgba(255,0,0,0)
@-moz-keyframes pulse
  0%    
    background: #ccc 
    box-shadow: 0 0 1em rgba(255,0,0,0)
  50%   
    background: #cc0000 
    box-shadow: 0 0 1em rgba(255,0,0,1)
  100%  
    background: #ccc
    box-shadow: 0 0 1em rgba(255,0,0,0)
@-o-keyframes pulse 
  0%    
    background: #ccc
    box-shadow: 0 0 1em rgba(255,0,0,0)
  50%   
    background: #cc0000
    box-shadow: 0 0 1em rgba(255,0,0,1)
  100%  
    background: #ccc
    box-shadow: 0 0 1em rgba(255,0,0,0)
@keyframes pulse 
  0%    
    background: #ccc
    box-shadow: 0 0 1em rgba(255,0,0,0)
  50%   
    background: #cc0000
    box-shadow: 0 0 1em rgba(255,0,0,1)
  100%  
    background: #ccc
    box-shadow: 0 0 1em rgba(255,0,0,0)