我正在编写一个弹出式扩展程序，但我一直在设计

Question

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

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>

Answer 1

我会做这样的事情（你有一些 repeated/redundant 样式）：

.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>

我正在编写一个弹出式扩展程序，但我一直在设计

I'm coding a popup extension and I'm stuck at design

html

javascript

css

styles

web-applications