Drag Icon

drag-icon.markdown

Drag Icon

Drag icon using :before and multiple text-shadows

A Pen by Ben Kalsky on CodePen.

License.

index.html

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<div class="drag-me">Drag me around!</div>

Pure-CSS-Drag-Icon.markdown

Pure CSS Drag Icon

Drag icon using :before and multiple text-shadows

A Pen by Ben Kalsky on CodePen.

License.

script.js

$(function() {
  $(".drag-me").draggable();
});

style.scss

@import "compass/css3";
@import url(https://fonts.googleapis.com/css?family=Lato:400italic);

@mixin grab-cursor {
  cursor: url('https://www.google.com/intl/en_ALL/mapfiles/openhand.cur'), all-scroll;
  cursor: -webkit-grab;
  cursor: -moz-grab;
  cursor: -o-grab;
  cursor: -ms-grab;
  cursor: grab;
}

@mixin grabbing-cursor {
  cursor: url('https://www.google.com/intl/en_ALL/mapfiles/closedhand.cur'), all-scroll;
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
  cursor: -o-grabbing;
  cursor: -ms-grabbing;
  cursor: grabbing;
}

$purple: #d94fed !default;
$violet: #5C258D !default;
$blue: #4389A2 !default;

* {
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1;
  @include box-sizing(border-box);
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  background: lighten($purple, 30%);
	display: flex;
	justify-content: center;
	align-items: center;
  background: linear-gradient(to right, rgba($blue, .75), rgba($violet, .75));
}

.drag-me {
  background: $purple;
  width: 180px;
  padding: 0 0 0 40px;
  color: darken($purple, 30%);
  line-height: 50px;
  @include grab-cursor;
  @include transition(transform .2s, box-shadow .2s);
  @include border-radius(10px);
  @include box-shadow(darken($purple, 10%) 0 0 3px);

  &:hover {
    @include scale(1.03);
    @include box-shadow(darken($purple, 30%) 0 1px 3px);
  }

  &:active {
    @include grabbing-cursor;
    @include scale(1.1);
    @include box-shadow(darken(rgba($purple, .7), 30%) 0 2px 8px);
  }

  &:before {
    content: '.';
    position: absolute;
    left: 14px;
    font-size: 20px;
    line-height: 26px;
    color: darken($purple, 20%);
    @include text-shadow(0 5px darken($purple, 20%), 0 10px darken($purple, 20%), 5px 0 darken($purple, 20%), 5px 5px darken($purple, 20%), 5px 10px darken($purple, 20%), 10px 0 darken($purple, 20%), 10px 5px darken($purple, 20%), 10px 10px darken($purple, 20%));
  }
}