Run Less in jsFiddle

by chovy

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/1.6.3/less.min.js"></script>
<button>
    <span>Send an email</span>
    <img src="http://i.imgur.com/HjJh7bc.png" />
</button>

<button>
    <span>Send an email</span>
    <img src="http://i.imgur.com/HjJh7bc.png" />
</button>

<button>
    <span>Send an email</span>
    <img src="http://i.imgur.com/HjJh7bc.png" />
</button>

<button>
    <span>Send an email</span>
    <img src="http://i.imgur.com/HjJh7bc.png" />
</button>

CSS

button {
    display: block;
    font-size: 1rem;
    position: relative;
    width: 200px;
    padding: 10px;
    border: 1px solid blue;
    background: #eef;
    overflow: hidden;
    margin-bottom: 10px;
    
    span {
        transition: margin-right .2s ease-in-out;
    }
    
    img {
        transition: right .2s ease-in-out;
        position: absolute;
        right: -20px;
        width: 20px;
    }    

    &:hover {
        img {
            right: 10px;
        }
        span {
            margin-right: 30px;
        }
    }
}

JavaScript

/*
    jsFiddle does not directly support Less so we need these bits of code to bring it here. 
    
    Twitter: @aaronlayton
    Modified by meri
    Updated by max
*/

// Step 1: Select the style element and change it to text/less
$('head style[type="text/css"]').attr('type','text/less');

// Step 2: Set development mode to see errors
less.env = 'development';

// Step 3: Tell Less to refresh the styles
less.refreshStyles();