I've found a great hover effect for my buttons which I would like to incorporate in my website. However, it's not working. It's htis snippet: http://cssdeck.com/labs/fhxam1sb
Now I have the following code, which only gives me a black square with no hover effect at all. What am I missing?
<!DOCTYPE html>
<html>
<head>
<title>Animated Buttons with CSS3</title>
<style media="screen" type="text/css">
// Basic Round Button Layout
a {
color: white;
text-decoration: none;
font-size: 40px;
}
.effect-1 {
position: relative;
height: 100px;
width: 100px;
margin: 100px;
@include border-radius(50%);
display: block;
text-align: center;
line-height: 100px;
font-family: 'Monoton', cursive;
background-color: black;
-webkit-transform: translateZ(0);
&:hover {
background-color: rgba(0,0,0,0.8);
@include transition(background-color 0.2s);
&:after {
@include scale(1);
@include transition(transform 0.2s);
}
}
}
.effect-1:after {
position: absolute;
top:-10px;
left: -10px;
content: '';
height: 100%;
width: 100%;
padding: 10px;
@include border-radius(50%);
@include box-shadow(0 0 0 5px rgba(0,0,0,0.8));
@include scale(0.7);
@include transition(transform 0.2s);
}
</style>
</head>
<body>
<link href='http://fonts.googleapis.com/css?family=Monoton' rel='stylesheet' type='text/css'>
<a href="#" class="btn effect-1">M</a>
</body>
</html>