代码之家 › 专栏 › 技术社区 › yevg

如何用CSS创建这个按钮?

css3 css html

0

yevg · 技术社区 · 7 年前

如何使用CSS创建以下按钮?

颜色的对角线差异。

button.btn {
  color: white;
  background-color: red;
  padding: 10px 20px;
  line-height: 1;
  border: none;
  transform: skewX(-25deg);
  cursor: pointer;
}
button.btn span {
  display: block;
  transform: skewX(25deg);
}

<button class="btn" ><span>View Demo</span></button>

但我相信这一切都必须改变。

4 回复 | 直到 7 年前

1

2

Temani Afif 7 年前

这是一个适用于任何尺寸的梯度解决方案:

button.btn {
  color: white;
  background:linear-gradient(to bottom right, #e80027 49%,#d20024 50%);
  padding: 10px 20px;
  line-height: 1;
  border: none;
  transform: skewX(-25deg);
  cursor: pointer;
}
button.btn span {
  display: block;
  transform: skewX(25deg);
}

<button class="btn" ><span>View Demo</span></button>
<button class="btn" ><span>View Demo Demoooo</span></button>
<button class="btn" ><span>View </span></button>

2

1

Guruprasad J Rao 7 年前

使用 Gradient CSS generator

button.btn {
  color: white;
  background: rgba(248, 80, 50, 1);
  background: -moz-linear-gradient(-45deg, rgba(248, 80, 50, 1) 0%, rgba(241, 111, 92, 1) 50%, rgba(246, 41, 12, 1) 51%, rgba(240, 47, 23, 1) 71%, rgba(231, 56, 39, 1) 100%);
  background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(248, 80, 50, 1)), color-stop(50%, rgba(241, 111, 92, 1)), color-stop(51%, rgba(246, 41, 12, 1)), color-stop(71%, rgba(240, 47, 23, 1)), color-stop(100%, rgba(231, 56, 39, 1)));
  background: -webkit-linear-gradient(-45deg, rgba(248, 80, 50, 1) 0%, rgba(241, 111, 92, 1) 50%, rgba(246, 41, 12, 1) 51%, rgba(240, 47, 23, 1) 71%, rgba(231, 56, 39, 1) 100%);
  background: -o-linear-gradient(-45deg, rgba(248, 80, 50, 1) 0%, rgba(241, 111, 92, 1) 50%, rgba(246, 41, 12, 1) 51%, rgba(240, 47, 23, 1) 71%, rgba(231, 56, 39, 1) 100%);
  background: -ms-linear-gradient(-45deg, rgba(248, 80, 50, 1) 0%, rgba(241, 111, 92, 1) 50%, rgba(246, 41, 12, 1) 51%, rgba(240, 47, 23, 1) 71%, rgba(231, 56, 39, 1) 100%);
  background: linear-gradient(135deg, rgba(248, 80, 50, 1) 0%, rgba(241, 111, 92, 1) 50%, rgba(246, 41, 12, 1) 51%, rgba(240, 47, 23, 1) 71%, rgba(231, 56, 39, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827', GradientType=1);
  padding: 10px 20px;
  line-height: 1;
  border: none;
  transform: skewX(-25deg);
  cursor: pointer;
}

button.btn span {
  display: block;
  transform: skewX(25deg);
}

<button class="btn"><span>View Demo</span></button>

3

1

Gaurav 7 年前

试试这个:

.btn{
  background-color: #34ADFF;
  background-image: -webkit-linear-gradient(-68deg, #e80027 50%, #d20024 50%);
  border:0px;
  padding:20px 25px;
  font-size:17px;
  -webkit-transform:skew(-30deg);
    -moz-transform:skew(-30deg);
    -o-transform:skew(-30deg);
    transform:skew(-30deg);
  color:#fff;
  margin-left:20px;
}

<button class="btn" ><span>View Demo</span></button>

4

0

webcodesnip.com 7 年前

button.btn {

    color: white;
    background-color: red;
    padding: 10px 20px;
    line-height: 1;
    border: none;
    transform: skewX(-25deg);
    cursor: pointer;
	background: linear-gradient(165deg, rgba(245, 80, 50, 1) 0%, rgba(245, 111, 92, 1) 50%, rgba(230, 41, 12, 1) 51%, rgba(230, 47, 23, 1) 71%, rgba(230, 56, 39, 1) 100%);
  
}
button.btn span {

    display: block;
    transform: skewX(25deg);
}

<button class="btn" ><span>View Demo</span></button>