这是一个可以安装在许多浏览器中的弹出式扩展，我想为它的设计创建一个漂亮的外观。我是一个新手，我设计，但我觉得它看起来不是很好。我想增加它的外观，以获得更好的用户体验。本设计的代码如下:谢谢你。
我的设计
(如有错误请原谅)
弹出式扩展
.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>我会这样做(你有一些重复/冗余的样式):
.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>