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

This is a popup extension can be installed in many browsers, and I want to create a nice look for its design. I am a newbie, I designed but I feel that it looks something not really good. I want to increase it looks for a better user experience. The code of this design is below. Thanks you.

My design

(Excuse me if there's mistakes)

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>

CodePudding user response：

I would do something like this (you had some repeated/redundant stylings):

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