无涯教程网

如何使用 html 和 css 添加超链接功能

发布于11月06日

我有一些HTML代码，其中包括一些css，我想要的按钮实际上有一个像超链接的用途，我按下它，它会把我带到某个文件或网址，我曾try 在字段中使用实际的超链接，但它看起来很难看，我只能按超链接，我试图添加一个HTML默认的超链接按钮，但它不能着色.

代码如下:

<html>
<body style="background-color:rgb(48, 45, 45)">
<font color="white">
<font color="#4CAF50">
<head>
<style>
.button {
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button1 {background-color: #4CAF50;}
.button2 {background-color: #008CBA;}
</style>
</head>
<body>
<button class="button button1">Green</button>
<button class="button button2">Blue</button>
</body>

推荐答案

使用onclick元素:

    <button onclick="goToStackOverflow()">Click Me</button> 
    <script>
        function goToStackOverflow() {
          document.location.href = "https://stackoverflow.com";
        }
    </script>

或者您可以设置<a>元素的样式，使其看起来像一个按钮

a {
  color: white;
  background-color: orange;
  text-decoration: none;
  padding: 10px 15px;
  border-radius: 8px;
  cursor: pointer;
}

a:hover {
  opacity: 0.8;
}

a:active {
  opacity: 0.6;
}

<a href="https://stackoverflow.com">Click Me</a>

Html相关问答推荐

我似乎不能正确地将我的导航栏居中'

如何在css中将包含多行文本的多个p-tag放在一起(并排)？

Tumblr博客：如何修复提交页面和询问页面框列计数问题？

Angular 分量被循环

如何防止可见的滑动抽屉，同时转移HTML方向？

Firefox和Chrome在文字装饰和文字阴影方面的不同优先顺序

如何使用CSS在<；表格中<；SVG&>？

带下划线的文本应该有延长的下划线，以使其图像悬停

try 更新我的Node.js应用程序中的用户，但我收到错误.然而，当我使用postman 时，更新工作正常

为什么一个 CSS 网格框比其他网格框低？

在HTML使用link标签导入外部CSS时出现元素link不允许使用尾斜杠错误

如何让一个 div 元素粘在另一个元素上？

如何在Bootstrap卡片底部添加波浪形状

在随机图像下对齐文本

提交前的验证表单未显示任何验证消息？

为什么相同持续时间的转换需要不同的时间？

如何将我的输入值固定到 2022 年 12 月？

是否有一种静态方式可以根据暗模式 Select 一张或另一张图像？

无法在 css 的 body 标签中正确呈现(内联显示)

有没有办法在 CSS 类子句中指定多个 HTML 元素？

实用课程推荐

相关教程推荐