如何利用网页上的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>
您需要将锚标记放在正文而不是头部。脑子里的东西不会显示在屏幕上。通过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>