CSS适用于codepen，但不适用于浏览器的本地文件答案

【问题标题】：CSS works on codepen but not in local file in browserCSS适用于codepen，但不适用于浏览器的本地文件
【发布时间】：2020-12-27 08:29:50
【问题描述】：

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

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

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

我已将所有内容作为 sn-p 附加，但为了更加清晰，我在本地使用的代码（在 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,0,0.4) 100%),
              -webkit-linear-gradient(left, lighten(#00684d, 15%) 0%, #00684d 50%, lighten(#00684d, 15%) 100%);
  background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.4) 100%),
              linear-gradient(to right, lighten(#00684d, 15%) 0%, #00684d 50%, lighten(#00684d, 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, initial-scale=1, 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>

似乎即使在 sn-p 中，在 codepen 上看到的结果也没有被复制。

为什么会这样？ CSS 不依赖任何东西，并且引用了相同版本的 font-awesome。尽管我很想解决这个问题，但重要的是我要了解是什么导致了我自己的问题。

【问题讨论】：

Codepen 使用 LESS 而不是 CSS，据我所知，您的项目只使用 CSS
如果您不想在项目中扩展 CSS，您可以将 LESS 转换为 CSS，看看是否可行？
谢谢 Dylan，这么简单的答案我不知道我是怎么忽略的。

标签： html css font-awesome codepen

【解决方案1】：

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

【讨论】：