Question

我发现我的按钮有一个很好的悬停效果，我想在我的网站上加入。但是，它不起作用。这是htis片段：http://cssdeck.com/labs/fhxam1sb

现在我有以下代码，它只给我一个没有悬停效果的黑色方块。我错过了什么？

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

Answer 1

点击cssdeck左侧的扳手图标：你会发现它使用SCSS w / Compass而不是vanilla CSS。要在您的网站中使用它，您需要将其编译为CSS。

圆形按钮CSS3悬停不起作用

1 个答案: