圓形按鈕CSS3懸停不起作用

我發現我的按鈕有很棒的懸停效果，我希望將其放入我的網站。但是，它不起作用。它的代碼片段如下：http://cssdeck.com/labs/fhxam1sb 圓形按鈕CSS3懸停不起作用

現在我有下面的代碼，它只給了我一個沒有懸停效果的黑色方塊。我錯過了什麼？

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

來源

2013-10-23 user2704687

您發佈的CSS實際上是SASS - 因此，除非您已安裝並運行SASS，否則將不會正確解析「@ include」語句。 – Terry

點擊在cssdeck左側的扳手圖標：你會看到它使用SCSS W /指南針而不是香草CSS。爲了在您的網站中使用它，您需要將其編譯爲CSS。

來源

2013-10-23 23:08:29 forivall

謝謝，我會試着找到如何做到這一點！ – user2704687

圓形按鈕CSS3懸停不起作用

回答

相關問題