<div class='main-content'>
<div class='header-group'>
<h1>CSS Animations - Providing Feedback</h1>
</div>
<div class='btn-group'>
<a href="#!" class='btn' id='circle1'>Click Me</a>
</div>
<div class='btn-group'>
<a href="#!" class='btn' id='circle2'></a>
<span> Click this circle</span>
</div>
<div class='btn-group'>
<a href="#!" class='btn' id='circle3'></a>
<span> Click this circle</span>
</div>
</div>
</div>
body {
font-family: 'Open Sans', sans-serif;
font-size: 18px;
}
.header-group {
display: block;
text-align: center;
}
h1 {
position: relative;
display: inline-block;
text-align: center;
font-size: 3rem;
margin-bottom: 1em;
padding: 0.25em 0;
}
h1:after {
content: "";
border-bottom: 3px solid black;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
.main-content {
margin-top: 5vw;
}
.btn-group {
display: block;
width: 100%;
clear: both;
text-align: center;
margin-bottom: 2em;
.btn {
display: block;
position: relative;
width: 5em;
height: 5em;
margin: 0 auto 1.5em;
text-align: center;
background-color: lighten(blue, 15%);
color: white;
text-decoration: none;
transition: all .4s ease-out;
border-radius: 50%;
line-height: 4.4;
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.32);
transform: scale(1);
transition: transform .3s ease;
&.clicked-action {
transform: scale(1.2);
}
}
#circle2 {
background-color: darkgreen;
width: 2em;
height: 2em;
line-height: 2.4;
}
#circle3 {
background-color: darkred;
width: 1em;
height: 1em;
line-height: 2.4;
&.clicked-action {
transform: scale(1.5);
}
}
span {
display: block;
color: black;
position: relative;
margin-top: -1em;
}
}
View Compiled
$('.btn').mousedown( function(e) {
e.preventDefault();
e.stopPropagation();
$(this).addClass('clicked-action');
});
$('.btn').mouseup( function(e) {
e.preventDefault();
e.stopPropagation();
$(this).removeClass('clicked-action');
});
View Compiled
This Pen doesn't use any external CSS resources.