0

私のウェブサイトに組み込みたいボタンの素晴らしいホバー効果を見つけました。しかし、それは機能していません。これは 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>
4

1 に答える 1

2

cssdeck の左側にあるレンチ アイコンをクリックします。通常の CSS ではなく、Compass を使用した SCSS を使用していることがわかります。サイトで使用するには、CSS にコンパイルする必要があります。

于 2013-10-23T23:08:29.023 に答える