那些遇到过的问题

小编Thé*_*oit的帖子

CSS按钮一边倒圆

我必须创建一个这样的按钮:

在此输入图像描述

我认为这样做很容易,但是我在做圆边(左,右)时遇到了一些麻烦,我想我也有问题要添加一些额外的颜色.

我现在做了类似的东西(我觉得颜色不一样)

.home_header_buttons {
  display: flex;
}

.home_header_buttons .btn_home {
  position: relative;
  text-transform: uppercase;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 2.4px;
  margin-right: -2.4px;
  line-height: 13px;
  background-color: rgba(8, 17, 23, .5);
  border: 1px solid #173c3d;
  padding: 30px 60px;
}

.home_header_buttons .btn_home:first-child {
  color: #16dcf3;
  border-right: none;
}
.home_header_buttons .btn_home:first-child::after {
  content: '';
  position: absolute;
  display: block;
  background: radial-gradient(circle at center, #007278 20%, #0b111a 100%);
  width: 1px;
  height: 90%;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  z-index: 1;
}

.home_header_buttons …
Run Code Online (Sandbox Code Playgroud)

css css3

Thé*_*oit
lucky-day
5
推荐指数
2
解决办法
1919
查看次数

标签 统计

css ×1

css3 ×1