时间戳

首页 > 解决方案 > 如何利用网络上的 CSS 按钮？

html - 如何利用网络上的 CSS 按钮？

问题描述

如何利用网络上的 CSS 按钮？

大家好，我在网上找到了一个 CSS 按钮，现在我尝试在我的网站上实现它，但我不明白如何在我的身体中调用按钮，这是下面的代码

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>img_test</title>
  <style type="text/css">
      
      <a href="#" class="myButton">orange</a>

.myButton {
    box-shadow:inset 0px 1px 0px 0px #fff6af;
    background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
    background-color:#ffec64;
    border-radius:6px;
    border:1px solid #ffaa22;
    display:inline-block;
    cursor:pointer;
    color:#333333;
    font-family:Arial;
    font-size:15px;
    font-weight:bold;
    padding:6px 24px;
    text-decoration:none;
    text-shadow:0px 1px 0px #ffee66;
}
.myButton:hover {
    background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
    background-color:#ffab23;
}
.myButton:active {
    position:relative;
    top:1px;
}

  </style>
</head>

<body>
  
??????

</body>

</html>

标签： htmlcss

解决方案

你需要把你的锚标签放在身体而不是头部。头部的东西不会显示在屏幕上。通过MDN对基础知识有一个很好的理解。

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>img_test</title>
  <style type="text/css">
      
      

.myButton {
    box-shadow:inset 0px 1px 0px 0px #fff6af;
    background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
    background-color:#ffec64;
    border-radius:6px;
    border:1px solid #ffaa22;
    display:inline-block;
    cursor:pointer;
    color:#333333;
    font-family:Arial;
    font-size:15px;
    font-weight:bold;
    padding:6px 24px;
    text-decoration:none;
    text-shadow:0px 1px 0px #ffee66;
}
.myButton:hover {
    background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
    background-color:#ffab23;
}
.myButton:active {
    position:relative;
    top:1px;
}

  </style>
</head>

<body>
  
<a href="#" class="myButton">orange</a>

</body>

</html>

推荐阅读