获取正确的文本颜色和字体粗细

Question

我正在尝试设计这个按钮

根据此图片（仅存在图片来源。）

正在对代码应用更改

Html

<a href="#">Community</a>

CSS

#topbar ul li a { 
background-color: #6293F0; 
color:  #D6EA68;
}

结果是

问题是获得 1) 正确的文本颜色，2) 字体粗细。

每次我使用不同的颜色选择器时，我都会得到不同的文本颜色。示例：这些是黄色文本颜色的不同颜色选择器的颜色代码：#D6CD45、#D6EA68、#D4E160、#F3FF9C、#C8D762、#F4F766。

我该如何解决这个问题？

Answer 1

a { 
  background-color: rgb(100, 145, 239); 
  color:  rgba(234, 255, 46, 1);
  text-shadow: -2px 1px rgba(0,0,0,.4);
  padding: 30px 30px;
  letter-spacing: -0.05em;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
}

<a href="#">Community</a>

Answer 2

如何将其包装在 div 中？

<div class="box"><a href="#">Community</a></div>

.box {
  width: 100px;
  height: 40px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  background-color: #6293F0;
}

.box a {
  color: #D6EA68;
  font-weight: 800;
}

获取正确的文本颜色和字体粗细

Get the correct text-color and font-weight

css

colors

fonts