.custom-btn {
  width: 300px;

  /* font-size: 1.3em; */
  line-height: 42px;

  /* width: 230px; */
  color: white; /* 确保文字颜色为白色以提高可读性 */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); /* 可选：为文字添加轻微阴影以提高对比度 */
  /* ... */
  /* color: #fff; */
  border-radius: 5px;
  /* padding: 30px 25px !important; */
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5),
    7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
  outline: none;
  justify-content: center;
}
.costom-span {
  font-size: 22px;
  /* padding: 10px 35px; */
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 5 */
.btn-5 {
  /* height: 40px; */
  padding: 0;
  border: none;
  background: linear-gradient(
    180.40010368844378deg,
    rgba(255, 79, 114, 1) 1.2066752246469834%,
    rgba(254, 78, 113, 1) 1.2066752246469834%,
    rgba(158, 0, 74, 1) 93.11938382541719%
  );
}
.btn-5:hover {
  color: #f0094a;
  background: transparent;
  box-shadow: none;
  transform: translate(0px, -3px);
}
.btn-5:before,
.btn-5:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 2px;
  width: 0;
  background: #f0094a;
  box-shadow: -1px -1px 5px 0px #fff, 7px 7px 20px 0px #0003,
    4px 4px 5px 0px #0002;
  transition: 400ms ease all;
}
.btn-5:after {
  right: inherit;
  top: inherit;
  left: 0;
  bottom: 0;
}
.btn-5:hover:before,
.btn-5:hover:after {
  width: 100%;
  transition: 800ms ease all;
}

/* 10 */

.btn-c {
  /* height: 40px; */
  padding: 0;
  border: none;
  background-image: linear-gradient(
    180.40010368844378deg,
    rgba(79, 120, 255, 1) 1.2066752246469834%,
    rgba(78, 119, 254, 1) 1.2066752246469834%,
    rgba(0, 45, 158, 1) 93.11938382541719%
  );
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 简单的阴影效果，模拟立体感 */
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); /* 文字的轻微阴影 */
  transition: all 0.3s ease;
}
.btn-c:hover {
  color: rgb(22, 9, 240);
  background: transparent;
  box-shadow: none;

  transform: translate(0px, -3px);
  /* border-bottom: 0px solid rgb(22, 9, 255); */
}
.btn-c:before,
.btn-c:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 2px;
  width: 0;
  background: rgba(22, 9, 240, 1) 100%;
  box-shadow: -1px -1px 5px 0px #fff, 7px 7px 20px 0px #0003,
    4px 4px 5px 0px #0002;
  transition: 400ms ease all;
}
.btn-c:after {
  right: inherit;
  top: inherit;
  left: 0;
  bottom: 0;
}
.btn-c:hover:before,
.btn-c:hover:after {
  width: 100%;
  transition: 800ms ease all;
}