Circle selection

by mnk

HTML

<div class="section">
    
</div>

CSS

.btn {
    opacity: 0.5;
    width: 30px;
    font: 16px/18px Helvetica;
    color: white;
    text-decoration: none;
    background-color: #6bbefd;
    display: inline-block;
    margin: 5px;

    height: 30px;
    
    cursor: inherit;
    
    -webkit-border-radius: 20px;
    border-radius: 20px;
    border: solid 2px white;
    
    -webkit-box-shadow: 0 0px 0 0 rgba(45,147,212,1);
    box-shadow: 0 0px 0 0 rgba(45,147,212,1);
    
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -ms-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
}

.btn:hover,
.btn.selected:hover{
    border: solid 2px rgba(40,133,189,1);
}


.btn.selected {
    opacity: 1;
    -webkit-box-shadow: 0 4px 0 0 rgba(40,133,189,1);
    box-shadow: 0 4px 0 0 rgba(40,133,189,1);
    
    border: solid 2px rgba(40,133,189,0.5);
   
    margin-top: 5px;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -ms-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
}

.section {
    cursor: crosshair;
}

JavaScript

var section = $('.section');

for(var i = 0; i < 200; i++){
    section.append($('<div class="btn"></div>'));
}

$('.btn').on('click', function(){
    $(this).toggleClass('selected');
});