0

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>
4

1 回答 1

2

单击 cssdeck 左侧的扳手图标:您会看到它使用的是带 Compass 的 SCSS,而不是普通的 CSS。为了在您的站点中使用它,您需要将其编译为 CSS。

于 2013-10-23T23:08:29.023 回答