Skip to content

Instantly share code, notes, and snippets.

@StrikingLoo

StrikingLoo/index.html

Created October 5, 2016 01:55
Show Gist options
  • Save StrikingLoo/da410bdc6356aace6662edf6c95facf1 to your computer and use it in GitHub Desktop.
Save StrikingLoo/da410bdc6356aace6662edf6c95facf1 to your computer and use it in GitHub Desktop.
Download ZIP
Invisible Circles
Raw
index.html
<body>
<div class = 'container-fluid'>
<div class= 'row'>
<div class = 'col-xs-1'>
<button></button></div>
<div class = 'col-xs-1'>
<button></button></div>
<div class = 'col-xs-1'>
<button></button></div>
<div class = 'col-xs-1'>
<button></button></div>
<div class = 'col-xs-1'>
<button></button></div>
<div class = 'col-xs-1'>
<button></button></div>
<div class = 'col-xs-1'>
<button></button></div>
<div class = 'col-xs-1'>
<button></button></div>
<div class = 'col-xs-1'>
<button></button></div>
<div class = 'col-xs-1'>
<button></button></div>
<div class = 'col-xs-1'>
<button></button></div>
<div class = 'col-xs-1'>
<button></button></div>
</div>
<div class= 'row'>
<div class = 'col-xs-1'>
<button></button></div>
<div class = 'col-xs-1'>
<button></button></div>
<div class = 'col-xs-1'>
<button></button></div>
<div class = 'col-xs-1'>
<button></button></div>
<div class = 'col-xs-1'>
<button></button></div>
<div class = 'col-xs-1'>
<button></button></div>
<div class = 'col-xs-1'>
<button></button></div>
<div class = 'col-xs-1'>
<button></button></div>
<div class = 'col-xs-1'>
<button></button></div>
<div class = 'col-xs-1'>
<button></button></div>
<div class = 'col-xs-1'>
<button></button></div>
<div class = 'col-xs-1'>
<button></button></div>
</div>
<div class= 'row'>
<div class = 'col-xs-1'>
<button></button></div>
<div class = 'col-xs-1'>
<button></button></div>
<div class = 'col-xs-1'>
<button></button></div>
<div class = 'col-xs-1'>
<button></button></div>
<div class = 'col-xs-1'>
<button></button></div>
<div class = 'col-xs-1'>
<button></button></div>
<div class = 'col-xs-1'>
<button></button></div>
<div class = 'col-xs-1'>
<button></button></div>
<div class = 'col-xs-1'>
<button></button></div>
<div class = 'col-xs-1'>
<button></button></div>
<div class = 'col-xs-1'>
<button></button></div>
<div class = 'col-xs-1'>
<button></button></div>
</div>
<div class= 'row'>
<div class = 'col-xs-1'>
<button></button></div>
<div class = 'col-xs-1'>
<button></button></div>
<div class = 'col-xs-1'>
<button></button></div>
<div class = 'col-xs-1'>
<button></button></div>
<div class = 'col-xs-1'>
<button></button></div>
<div class = 'col-xs-1'>
<button></button></div>
<div class = 'col-xs-1'>
<button></button></div>
<div class = 'col-xs-1'>
<button></button></div>
<div class = 'col-xs-1'>
<button></button></div>
<div class = 'col-xs-1'>
<button></button></div>
<div class = 'col-xs-1'>
<button></button></div>
<div class = 'col-xs-1'>
<button></button></div>
</div>
<div class= 'row'>
<div class = 'col-xs-1'>
<button></button></div>
<div class = 'col-xs-1'>
<button></button></div>
<div class = 'col-xs-1'>
<button></button></div>
<div class = 'col-xs-1'>
<button></button></div>
<div class = 'col-xs-1'>
<button></button></div>
<div class = 'col-xs-1'>
<button></button></div>
<div class = 'col-xs-1'>
<button></button></div>
<div class = 'col-xs-1'>
<button></button></div>
<div class = 'col-xs-1'>
<button></button></div>
<div class = 'col-xs-1'>
<button></button></div>
<div class = 'col-xs-1'>
<button></button></div>
<div class = 'col-xs-1'>
<button></button></div>
</div>
</div>
</body>
Raw
invisible-circles.markdown

Invisible Circles

a small jquery practice, invisible buttons that appear when hovered over, turn red on click and green again on a second hover.

A Pen by Luciano Strika on CodePen.

License.

Raw
script.js
$(document).ready(function() {
$('button').on('mouseenter',function(){
$(this).removeClass('btn-danger');
$(this).addClass('btn-success');
})
$('button').on('click',function(){
$(this).removeClass('btn-success');
$(this).addClass('btn-danger');
})
})
Raw
scripts
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
Raw
style.css
body {
background-color: black;
}
button {
border-radius: 100%;
padding: 50px;
background-color:black;
border-color:black;
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment