如何编写CSS实现目标样式按钮，现有CSS代码不生效如何解决

你原有代码未生效的核心原因是未设置border-style属性，CSS中边框需要同时配置宽度、颜色、样式三个属性才会正常渲染，另外补充圆角、内边距等配置即可实现目标按钮效果，以下是完整可运行的CSS代码：

.account ul li {
  float            : right;
  list-style       : none;
  padding          : 4px 24px; /* 上下+左右内边距，撑起按钮合理尺寸 */
  margin           : 5px 20px 5px 0;
  border           : 5px solid #fcbf49; /* 补充solid实线样式，让边框正常显示 */
  border-radius    : 16px; /* 圆角设置，调整数值可修改圆角弧度 */
  background-color : white;
  cursor: pointer;
  transition: all 0.2s ease; /* 可选，让悬浮切换效果更顺滑 */
}
/* 可选悬浮交互效果，和示例按钮交互逻辑匹配 */
.account ul li:hover {
  background-color: #fcbf49;
}
.account ul li:hover a {
  color: #fff;
}
.account ul li a {
  text-decoration : none;
  font-family     : 'Baloo 2', cursive;
  font-size       : 30px;
  color           : #fcbf49;
}

主要修改点说明：

• 合并边框配置，补充solid实线属性，解决边框不显示的问题
• 调整内边距配置，给按钮上下方向也增加内边距，避免文字和边框贴合太挤
• 新增border-radius属性实现圆角效果
• 补充了常见的按钮悬浮交互效果，不需要可以直接删除对应代码块

内容的提问来源于stack exchange，提问作者Taha Paracha