使用 html 的 CSS 按鈕創建者鏈接
[英]CSS button creator link using html
問題描述
我在 CSS 按鈕生成器上創建了一個按鈕，無法將其鏈接到瀏覽器中顯示。 一個按鈕正在向瀏覽器生成，但它只是一個標准的 html 按鈕。 當前代碼是：
<!DOCTYPE html>
<html>
<body>
.btn {
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0px;
text-shadow: 0px 0px 0px #666666;
font-family: Arial;
color: #ffffff;
font-size: 38px;
padding: 40px;
text-decoration: none;
}
.btn:hover {
background: #3cb0fd;
background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
text-decoration: none;
}
<button type = "btn">Entry forms</button>
</body>
</html>
2 個解決方案
解決方案1
1 2014-10-16 15:20:01
您需要在 HTML 中指定btn類：
<button class="btn">Entry forms</button>
此外，您的 CSS 需要位於 HTML <head>部分的<style>標記內。
更新：完整代碼
<html> <head> <style type="text/css"> .btn { background: #3498db; background-image: -webkit-linear-gradient(top, #3498db, #2980b9); background-image: -moz-linear-gradient(top, #3498db, #2980b9); background-image: -ms-linear-gradient(top, #3498db, #2980b9); background-image: -o-linear-gradient(top, #3498db, #2980b9); background-image: linear-gradient(to bottom, #3498db, #2980b9); -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0px; text-shadow: 0px 0px 0px #666666; font-family: Arial; color: #ffffff; font-size: 38px; padding: 40px; text-decoration: none; } .btn:hover { background: #3cb0fd; background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db); background-image: -moz-linear-gradient(top, #3cb0fd, #3498db); background-image: -ms-linear-gradient(top, #3cb0fd, #3498db); background-image: -o-linear-gradient(top, #3cb0fd, #3498db); background-image: linear-gradient(to bottom, #3cb0fd, #3498db); text-decoration: none; } </style> </head> <body> <button class="btn">Entry forms</button> </body> </html>
解決方案2
0 2021-01-22 16:09:46
沒問題。 您只需要添加類“btn”。 我添加了一些樣式來改進它。
<html> <head> <style type="text/css"> button.btn { background: #3498db; background-image: -webkit-linear-gradient(top, #3498db, #2980b9); background-image: -moz-linear-gradient(top, #3498db, #2980b9); background-image: -ms-linear-gradient(top, #3498db, #2980b9); background-image: -o-linear-gradient(top, #3498db, #2980b9); background-image: linear-gradient(to bottom, #3498db, #2980b9); -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0px; text-shadow: 0px 0px 0px #666666; font-family: Arial; color: #ffffff; font-size: 38px; padding: 40px; text-decoration: none; border: none; border-radius: 5px; cursor: pointer; } button.btn:hover { background: #3cb0fd; background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db); background-image: -moz-linear-gradient(top, #3cb0fd, #3498db); background-image: -ms-linear-gradient(top, #3cb0fd, #3498db); background-image: -o-linear-gradient(top, #3cb0fd, #3498db); background-image: linear-gradient(to bottom, #3cb0fd, #3498db); text-decoration: none; } </style> </head> <body> <button class="btn">Entry forms</button> </body> </html>
或者，為了更加確定，您可以將下面的代碼添加到所有按鈕中。
（注意：它不會設置懸停按鈕的樣式）
<button style="background: #3498db; background-image: -webkit-linear-gradient(top, #3498db, #2980b9); background-image: -moz-linear-gradient(top, #3498db, #2980b9); background-image: -ms-linear-gradient(top, #3498db, #2980b9); background-image: -o-linear-gradient(top, #3498db, #2980b9); background-image: linear-gradient(to bottom, #3498db, #2980b9); -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0px; text-shadow: 0px 0px 0px #666666; font-family: Arial; color: #ffffff; font-size: 38px; padding: 40px; text-decoration: none; border: none; border-radius: 5px; cursor: pointer;">Entry forms</button>
在 html/css 中切換按鈕鏈接
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.