CSS适用于Codepen，但不适用于浏览器的本地文件

问题描述

我正在尝试实现此处显示的捐赠按钮：https://codepen.io/jvalle/pen/ImCtq

CSS看起来很简单，不需要JavaScript。我查看了源代码，并确保引用了与真棒字体完全相同的版本。

当我在本地运行以下代码时，（在所有主流浏览器中的最新版本中）我得到的按钮没有鼠标悬停动画，也没有心脏图标。

我已经将所有内容作为代码段附加了，但是为了更加清晰起见，我在本地使用的代码（donate.css中的css）是：

<!doctype html>
<html lang="en">

<head>

<Meta charset="utf-8">
<Meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">

<link rel="stylesheet" href="donate.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.0.2/css/font-awesome.min.css">

<title></title>

</head>

<body>
<a href="#" class="donate">DONATE</a>

</body>

</html>

body {
  font: 20px "Helvetica";
}

a {  
  display: inline-block;
  margin: 20px;
  position: relative;
  text-decoration: none;
}

.donate {
  background: #00684d;
  background: -webkit-linear-gradient(top,transparent 0%,rgba(0,0.4) 100%),-webkit-linear-gradient(left,lighten(#00684d,15%) 0%,#00684d 50%,15%) 100%);
  background: linear-gradient(to bottom,linear-gradient(to right,15%) 100%);
  background-position: 0 0;
  background-size: 200% 100%;
  border-radius: 4px;
  color: #fff;
  padding: 15px 65px 15px 15px;
  text-shadow: 1px 1px 5px #666;
  -webkit-transition: all 800ms;
  transition: all 800ms;
  
  &:after {
    border-left: 1px solid darken(#00684d,5%);
    color: darken(#00684d,10%);
    content: "\f004";
    font: 20px "FontAwesome";
    padding: 10px 0;
    padding-left: 15px;
    position: absolute;
    right: 16px;
    top: 7px;    
    -webkit-transition: all 600ms 200ms;
    transition: all 600ms 200ms;
  }
  
  &:hover {
    background-position: -100% 0;
    
    &:after {
      border-left: 1px solid lighten(#00684d,5%);
      color: #fff;
      text-shadow: 0 0 10px #000;
    }
  }
}

<!doctype html>
<html lang="en">

<head>

<Meta charset="utf-8">
<Meta name="viewport" content="width=device-width,shrink-to-fit=no">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.0.2/css/font-awesome.min.css">

<title></title>

</head>

<body>
<a href="#" class="donate">DONATE</a>

</body>

</html>

即使在摘要中，似乎也无法复制在代码笔上看到的结果。

为什么会这样？ CSS不依赖任何内容，并且引用了相同版本的font-awesome。就我想解决的问题而言，以我自己的理解，了解导致问题的原因很重要。

解决方法

将LESS代码编译为CSS，例如：http://lesscss.org/less-preview/

codepen font-awesome html