A Pen by kaushalya.

index.html

<div class="press"></div>

One-Div-Printing-Press-:D.markdown

One Div Printing Press :D

Only css dude.

A Pen by kaushalya on CodePen.

License.

script.js

// I think printing press...:D
//
// 2013 By Kaushalya Mandaliya
// twitter.com/seebeetee.com

style.scss

@import "compass";
$emw--color-alpha: #34495e;
$emw--color-beta: #bdc3c7;

@mixin animation($value) {
  -webkit-animation: #{$value};
     -moz-animation: #{$value};
      -ms-animation: #{$value};
          animation: #{$value};
}

@mixin keyframes($name) {
  @-webkit-keyframes #{$name} { @content; }
     @-moz-keyframes #{$name} { @content; }
       @-o-keyframes #{$name} { @content; }
          @keyframes #{$name} { @content; }
}

body {
  background: $emw--color-beta;
}

.press {
  background: $emw--color-beta;
  width: 7em;
  text-align: center;
  height: 3em;
  margin: 5em auto;
  @include box-shadow(0 0 0 0.7em $emw--color-alpha, 0 2em 0 $emw--color-alpha, 2em 0 0 $emw--color-alpha, -2em 0 0 $emw--color-alpha, 0 -2em 0 $emw--color-alpha);
  @include animation(movedude 1.5s ease-out infinite);
  @include border-radius(0.5em);
  
  
  &:after {
    content: 'By Kaushalya Mandaliya';
    position: absolute;
    right: 0.5em;
    bottom: 0.5em;
    color: darken($emw--color-beta,35%);
  }
}

@include keyframes(movedude) {
  to {
    @include box-shadow(0 0 0 0.7em $emw--color-alpha, 0 2em 0 $emw--color-alpha, 2em 0 0 $emw--color-alpha, -2em 0 0 $emw--color-alpha, 0 -2em 0 $emw--color-alpha, 0 6em 0 $emw--color-alpha, 0 10em 0 $emw--color-alpha, 0 14em 0 $emw--color-alpha,  0 18em 0 $emw--color-alpha, 0 22em 0 $emw--color-alpha);
  }
}