html - CSS 按钮生成器代码不会将效果应用于 html 文件

问题描述

我正在尝试创建一个“按钮”，当用户单击它时，它将打开他们的电子邮件收件箱以向我发送直接电子邮件。我使用https://cssbuttoncreator.com/为我的按钮设置样式，并检查了代码，一切似乎都很好。但是，当我将代码粘贴到我的 css 文件中并重新运行我的网站时，按钮没有任何反应。

.html 文件

    <html lang="en" dir="ltr">
    <head>
      <meta charset="utf-8">
      <title>Calum Nguyen</title>
      <link rel="stylesheet" href="css/styles.css">
      <link rel="icon" href="favicon.ico">
      <link href="https://fonts.googleapis.com/css2?family=Merriweather&family=Montserrat&family=Sacramento&display=swap" rel="stylesheet">
    </head>

    <a class="btn" href="mailto:nguy127@usc.edu">CONTACT ME</a>

css 文件

    btn {
      background: #11CDD4;
      background-image: -webkit-linear-gradient(top, #11CDD4, #11999E);
      background-image: -moz-linear-gradient(top, #11CDD4, #11999E);
      background-image: -ms-linear-gradient(top, #11CDD4, #11999E);
      background-image: -o-linear-gradient(top, #11CDD4, #11999E);
      background-image: linear-gradient(to bottom, #11CDD4, #11999E);
      -webkit-border-radius: 8px;
      -moz-border-radius: 8px;
      border-radius: 8px;
      color: #FFFFFF;
      font-family: Arial;
      font-size: 20px;
      font-weight: 100;
      padding: 40px;
      box-shadow: 1px 1px 20px 0px #000000;
      -webkit-box-shadow: 1px 1px 20px 0px #000000;
      -moz-box-shadow: 1px 1px 20px 0px #000000;
      text-shadow: 1px 1px 20px #000000;
      text-decoration: none;
      display: inline-block;
      cursor: pointer;
      text-align: center;
    }

    .btn:hover {
      border: solid #DD380D 1px;
      background: #30E3CB;
      background-image: -webkit-linear-gradient(top, #30E3CB, #2BC4AD);
      background-image: -moz-linear-gradient(top, #30E3CB, #2BC4AD);
      background-image: -ms-linear-gradient(top, #30E3CB, #2BC4AD);
      background-image: -o-linear-gradient(top, #30E3CB, #2BC4AD);
      background-image: linear-gradient(to bottom, #30E3CB, #2BC4AD);
      -webkit-border-radius: 20px;
      -moz-border-radius: 20px;
      border-radius: 20px;
      text-decoration: none;
    }

标签： htmlcssbutton

解决方案

我尝试通过复制文件“media.html”中的 HTML 代码和 CSS 文件夹中的“media.css”中的 CSS 代码来运行您的代码，文件和文件夹位于名为“ES5Learning”的文件夹中。我得到了预期的结果。请看看我是如何放置文件的。以下是我尝试过的代码和它正在运行的屏幕截图：-

media.html 文件中的 HTML 代码：-

  <html lang="en" dir="ltr">
       <head>
           <meta charset="utf-8">
           <title>Calum Nguyen</title>
           <link rel="stylesheet" href="css/media.css">
           <link rel="icon" href="favicon.ico">
           <link href="https://fonts.googleapis.com/css2? 
          family=Merriweather&family=Montserrat&family=Sacramento&display=swap" rel="stylesheet">
      </head>




<a class="btn" href="mailto:nguy127@usc.edu">CONTACT ME</a>

</html>

这是 media.css 文件中的 CSS 代码：-

.btn {
    background: #11CDD4;
    background-image: -webkit-linear-gradient(top, #11CDD4, #11999E);
    background-image: -moz-linear-gradient(top, #11CDD4, #11999E);
    background-image: -ms-linear-gradient(top, #11CDD4, #11999E);
    background-image: -o-linear-gradient(top, #11CDD4, #11999E);
    background-image: linear-gradient(to bottom, #11CDD4, #11999E);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    color: #FFFFFF;
    font-family: Arial;
    font-size: 20px;
    font-weight: 100;
    padding: 40px;
    box-shadow: 1px 1px 20px 0px #000000;
    -webkit-box-shadow: 1px 1px 20px 0px #000000;
    -moz-box-shadow: 1px 1px 20px 0px #000000;
    text-shadow: 1px 1px 20px #000000;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    text-align: center;
}

.btn:hover {
border: solid #DD380D 1px;
background: #30E3CB;
background-image: -webkit-linear-gradient(top, #30E3CB, #2BC4AD);
background-image: -moz-linear-gradient(top, #30E3CB, #2BC4AD);
background-image: -ms-linear-gradient(top, #30E3CB, #2BC4AD);
background-image: -o-linear-gradient(top, #30E3CB, #2BC4AD);
background-image: linear-gradient(to bottom, #30E3CB, #2BC4AD);
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-decoration: none;
}

这些是运行代码的屏幕截图：-

html - CSS 按钮生成器代码不会将效果应用于 html 文件

问题描述

解决方案

推荐阅读