我正在编写一个弹出扩展程序，但我被困在设计中[关闭]答案

【问题标题】：I'm coding a popup extension and I'm stuck at design [closed]我正在编写一个弹出扩展程序，但我被困在设计中[关闭]
【发布时间】：2021-12-15 02:24:09
【问题描述】：

这是一个可以安装在许多浏览器中的弹出扩展，我想为它的设计创建一个漂亮的外观。我是新手，我设计的，但我觉得它看起来不是很好。我想增加它以寻求更好的用户体验。该设计的代码如下。谢谢你。

My design

（如有错误请见谅）

The Popup Extension

.button {
  background-color: #fdfdfd27;
  border: none;
  color: rgb(255, 255, 255);
  padding: 16px 32px;
  text-align: center;
  font-size: 16px;
  margin: 4px 2px;
  transition: 0.3s;
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  border-radius: 13px;
  font-family: 'Noto Sans', sans-serif;
}
.button:hover {opacity: ;background-color:  #f2f2f285;   box-shadow: 0 5px 15px rgba(145, 92, 182, .4);}
.button {color: #ffffff;}
body {
background-image: url("https://i.pinimg.com/originals/3a/d2/fb/3ad2fb208e12d2305a65999acf0e39e3.png?q=65")
}

<!DOCTYPE html>
<html>
<head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@700&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <h3 style="color:#ffffff; text-align: center; font-family: 'Noto Sans', sans-serif;" >Pick Dictionary | Chọn từ điển </h3>
    <div id="dict-type" style="font-size:15px;color:#666666; text-align: center; color: #e6e6e6;font-family: 'Noto Sans', sans-serif;">Please Select Your Dictionary</div>
    <button id="eng-vi" value="eng-vi", button class="button button">English to Vietnamese Dictionary | Anh - Việt </button>
    <button id="vi-eng" value="vi-eng", button class="button button">Vietnamese to English Dictionary | Việt - Anh </button>
    <button id="eng-eng" value="eng-eng", button class ="button button">English to English Dictionary | Anh - Anh </button>
    <br/>
    <button id="cse" value="cse", button class ="button button">Dictionary for CSE | Từ điển học thuật (Computer Science and Engineering) </button>
    <br/>
    <br/>
    <button id="hist", button class="button button">Search History | Lịch sử tra cứu </button>
    <ul id="history" style="color:#10466a; font-size:13px;"></ul>
</body>
</html>

【问题讨论】：

设计看起来不错。我建议将背景更改为简单而体面的背景图片
我同意 Groovy Guy 的观点。这实际上看起来真的很好。我的建议是减少按钮的不透明度，但不多。足以隐藏更多的背景。
你好像忘了问一个问题。请花点时间阅读帮助中心上的How do I ask a good question 文章。值得注意的是，Stack Overflow 上的所有问题都应该提出一个问题，或者提出一个需要解决的明确、明确的问题（其中隐含的问题是“我该如何解决这个问题”。
谢谢。这是我第一次提出问题，我会解决它。

标签： javascript html css web-applications styles

【解决方案1】：

我会做这样的事情（你有一些重复/冗余的样式）：

.button {
  width: 100%;
  text-align: center;
  background-color: #fdfdfd27;
  border: none;
  color: rgb(255, 255, 255);
  padding: 16px 32px;
  text-align: center;
  font-size: 16px;
  margin: 4px 2px;
  transition: 0.3s;
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  border-radius: 13px;
  font-family: 'Noto Sans', sans-serif;
}
hr {
  border-color: purple;
  margin: 20px 0 20px 0px;
}
.button:hover {background-color:  #f2f2f285;   box-shadow: 0 5px 15px rgba(145, 92, 182, .4);}
body {
background-image: url("https://i.pinimg.com/originals/3a/d2/fb/3ad2fb208e12d2305a65999acf0e39e3.png?q=65")
}

<!DOCTYPE html>
<html>
<head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@700&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <h3 style="color:#ffffff; text-align: center; font-family: 'Noto Sans', sans-serif;" >Pick Dictionary | Chọn từ điển </h3>
    <div id="dict-type" style="font-size:15px;color:#666666; text-align: center; color: #e6e6e6;font-family: 'Noto Sans', sans-serif;">Please Select Your Dictionary</div>
    <hr>
    <button id="eng-vi" value="eng-vi", button class="button button">English to Vietnamese Dictionary | Anh - Việt </button>
    <button id="vi-eng" value="vi-eng", button class="button button">Vietnamese to English Dictionary | Việt - Anh </button>
    <button id="eng-eng" value="eng-eng", button class ="button button">English to English Dictionary | Anh - Anh </button>
    <br/>
    <button id="cse" value="cse", button class ="button button">Dictionary for CSE | Từ điển học thuật (Computer Science and Engineering) </button>
    <br/>
    <br/><hr>
    <button id="hist", button class="button button">Search History | Lịch sử tra cứu </button>
    <ul id="history" style="color:#10466a; font-size:13px;"></ul>
</body>
</html>

【讨论】：