如何在CSS中设置这些按钮的样式？

Question

任何人都可以帮助设计这些按钮吗？

Answer 1

您可以使用倾斜 css属性

＆＃13;

＆＃13;

button{border:0;background:red;padding:10px;color:#fff;
transform:skewX(-20deg);}
button div{transform:skewX(20deg);}

＆＃13;

Text also skewed:
<button>Pay now</button>

<br><!--br tag just for spacing purpose not recommended-->
<br><!--br tag just for spacing purpose not recommended-->

Text without skewed:
<button><div>Pay now</div></button>

＆＃13;

＆＃13;

＆＃13;

关于倾斜（here）

Answer 2

这里已经提到了skew css属性，这是很棒的东西，并且有很好的答案。但只是为了在文本没有倾斜的情况下做出替代，你可以在按钮内放置一个像<div>这样的元素，并对抗按钮的倾斜，使文字笔直。

button {
  border:0;
  background:red;
  font-size: 15px;
  text-transform: uppercase;
  color:#FFFFFF;
  padding:15px 30px;
  transform:skewX(-20deg);
}

button div {
  transform:skewX(20deg);
}

<button>
  <div>Pay now</div>
</button>

Answer 3

另一种解决方案没有扭曲文字：

＆＃13;

＆＃13;

.button {
  background: red;
  border: none;
  color: white;
  padding: 0 10px;
  height: 25px;
  font-weight: bold;
  position: relative;
  margin-left: 30px;
}

.button::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 0;
  border-style: solid;
  border-width: 0 0 25px 10px;
  border-color: transparent transparent red transparent;
}

.button::after {
  content: "";
  position: absolute;
  right: -10px;
  top: 0;
  border-style: solid;
  border-width: 25px 10px 0 0;
  border-color: red transparent transparent transparent;
}

＆＃13;

<button class="button">PAY NOW</button>

＆＃13;

＆＃13;

＆＃13;

如果按钮为input，则无法使用，因为它不支持::after和::before

Answer 4

你可以使用css中的偏斜，如下所示

<div>
   <button class="button">PAY NOW</button>
</div>

.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    -webkit-transform: skew(150deg)
}

Answer 5

http://blog.karenmenezes.com/2014/jun/18/slanted-buttons-3-lines-css/

http://codepen.io/peterhry/pen/pxrkK/

尝试以下按钮链接：

  usort($result, "cmp");

 foreach($result as $s) {
  foreach($s as $t) {
    DisplayError("antoine 20")
    DisplayError("antoine 88")
    DisplayError("antoine 19")
  }

body {
  font-size: 16px/1.4;
  margin: 5em;
  background: #667;
}

.btn {
  display: inline-block;
  background: #333;
  border: .125em solid #000;
  padding: .5em 1em;
  position: relative;
  color: #fff;
  font: 1.5em/1.4 'Oswald', helvetica, arial, sans-serif;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;	       
  -webkit-filter: drop-shadow(.5em 1em .25em rgba(0,0,0,.4));
  -moz-filter:  drop-shadow(.5em 1em .25em rgba(0,0,0,.4));
  -o-filter:  drop-shadow(.5em 1em .25em rgba(0,0,0,.4));
  -ms-filter:  drop-shadow(.5em 1em .25em rgba(0,0,0,.4));
  filter: url(#f1); 
  filter:  drop-shadow(.5em .5em .25em rgba(0,0,0,.4));
  margin-right: 3em;
}

.btn:active {
  -webkit-filter: drop-shadow(.25em .5em .25em rgba(0,0,0,.4));
  -moz-filter:  drop-shadow(.25em .5em .25em rgba(0,0,0,.4));
  -o-filter:  drop-shadow(.25em .5em .25em rgba(0,0,0,.4));
  -ms-filter:  drop-shadow(.25em .5em .25em rgba(0,0,0,.4));
  filter: url(#f2); 
  filter:  drop-shadow(.25em .5em .25em rgba(0,0,0,.4));
  -webkit-transform: translate(.25em, .5em);
  -moz-transform: translate(.25em, .5em);
  transform: translate(.25em, .5em);
}

.btn.double:before,
.btn:after {
  content: "";
  position: absolute;
  display: block;
  background: #333;
  border: .125em solid #000;
  width: 1.125em;
  height: 100%;
  top: -.125em;
  -webkit-transform-origin: bottom left;
  -moz-transform-origin: bottom left;
  transform-origin: bottom left;
}

.btn:after {
  right: -.25em;
  -webkit-transform: skewX(-20deg);
  -moz-transform: skewX(-20deg);
  transform: skewX(-20deg);
  border-left: none;
}

.btn.double:before {
  left: -.25em;
  -webkit-transform: skewX(20deg);
  -moz-transform: skewX(20deg);
  transform: skewX(20deg);
  border-right: none;
}