首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

创建"突出显示"像白色背景上的"信息暗"按钮效果

创建一个突出显示的按钮效果,可以使用HTML、CSS和JavaScript来实现。以下是一个简单的示例,展示了如何创建一个白色背景上的"信息暗"按钮效果:

  1. HTML代码:
代码语言:html
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>突出显示按钮效果</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
   <button class="button">信息暗</button>
   <script src="scripts.js"></script>
</body>
</html>
  1. CSS代码(styles.css):
代码语言:css
复制
body {
    background-color: white;
}

.button {
    background-color: transparent;
    border: 2px solid black;
    color: black;
    font-size: 16px;
    padding: 10px 20px;
    cursor: pointer;
    transition: all 0.3s;
}

.button:hover {
    background-color: black;
    color: white;
}
  1. JavaScript代码(scripts.js):
代码语言:javascript
复制
document.querySelector('.button').addEventListener('click', function() {
    alert('按钮被点击!');
});

在这个示例中,我们创建了一个带有白色背景和黑色边框的按钮。当鼠标悬停在按钮上时,按钮的背景颜色会变为黑色,文字颜色会变为白色。当用户点击按钮时,会弹出一个提示框,显示"按钮被点击!"。

这个示例使用了HTML、CSS和JavaScript,可以在任何现代浏览器中运行。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的合辑

领券