Question

我正在努力使用CSS创建这个“按钮”。我还希望能够在我的HTML中手动添加“ABI”和“12/19”文本，以便我可以更改它。

附上我想要的尺寸结果。

CSS button

感谢您的帮助。

Answer 1

我很开心创造它，它并不完美，你需要进行一些调整才能像图像一样得到它，但它应该让你走上正确的道路：

HTML：

<div id="abi">ABI</div>
<div id="number">12/19</div>

CSS

div{
    float:left;
    height:60px;
    line-height:60px;
    font-size:20px;
    margin:0;
    padding:0;
}
#abi{
    width:75px;
    background:gray;
    color:blue;
    padding-left:25px;
    position:relative;
    z-index:2;
    -webkit-border-radius: 5px 0 0 5px;
border-radius: 5px 0 0 5px;
}
#abi:after{
    content:"";
    position:absolute;
    right:-10px;
    top: 19px;
    width: 0; 
    height: 0; 
    border-top: 11px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid gray;
}
#number{
    width:155px;
    text-align:right;
    padding-right:25px;
    background:blue;
    color:gray;
    -webkit-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;

}

Answer 2

东西

<强> LIKE THIS?

HTML

<div class='button'>ABI
    <div>12/19</div>
</div>

CSS

* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}
.button, .button div {
    color:grey;
    background:#007bff;
    display:inline-block;
    line-height:60px;
    font-size:20px;
}
.button div {
    padding-right:25px;
    padding-left:25px;
    width:180px;
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-bottomright: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    z-index:1;
    text-align:left;
    position:relative;
}
.button {
    color:#007bff;
    background:grey;
    padding-left:25px;
    width:280px;
    text-align:right;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    position:relative;
    z-index:1;
}
.button div:after {
    content:'';
    display:block;
    position:absolute;
    left:0px;
    top:20px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 10px 0 10px 14px;
    border-color: transparent transparent transparent grey;
    z-index:0;
}

Answer 3

也做了一个有趣的事情.. :)）

Fiddle

CSS

   .btn{
    position: relative;
    border-radius: 10px;
    display: table;
    font-size: 35px;
    font-family: Verdana, sans-serif;
    width: 280px;
    height: 60px;
    background: #2a2c2b;
}

.left{
    position: relative;
    padding-left: 25px;
    color: #0ebfe9;
    display: table-cell;
    width: 100px;
    vertical-align: middle;
}

.right{
    color: #2a2c2b;
    display: table-cell;
    width: 180px;
    vertical-align: middle;
    padding-left: 14px;
    padding-right: 25px;
}

.left:after
{
    height: 0px;
    content: '';
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid #2a2c2b;
    position: absolute;
    left:90px;
}

HTML

<div class="btn"><span class="left">ABI</span><span class="right">| 12/19</span></div>

（btn的背景是渐变，无法在这里的代码中得到它们。）

Answer 4

看起来很有趣，不得不亲自尝试：http://jsfiddle.net/8SUX6/1/

将href =“＃”更改为链接，使其成为一个或添加onclick事件以使其执行JS。

<a href="#" id="button">ABI <span>12/19</span></a>

#button {
font-weight: 600;
height: 60px;
width: 60px; /* 60 + 25 + 15 = 100 */
display: block;
text-decoration: none;
background: #2A2C2B;
color: #0EBFE9;
position: absolute;
border-radius: 5px 0 0 5px;
font-family: Segoe UI;
font-size: 40px;
padding-left: 25px;
padding-right: 15px;
}

#button:before {
left: 93px;
top: 10px;
z-index: 3;
content:"";
position: absolute;
width: 0;
height: 0;
border-left: 20px solid #2A2C2B;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}

#button span {
top: 0;
letter-spacing: 2px;
color: #2A2C2B;
position: absolute;
z-index: 2;
height: 60px;
width: 155px; /* 155 + 25 = 180px */
background: #0EBFE9;
position: absolute;
left: 100px;
border-radius: 0 5px 5px 0;
padding-right: 25px;
text-align: right;
}

Answer 5

以下可以是css

*{
  margin:0;
  padding:0;
  }

 div{
   float:left;
   margin-top:10px;
   font-size:20px;
   font-weight:bold;
   text-align:center;
   height:60px;
 }

 .abi{
   margin-left:10px;
   width:100px;
   background:#2A2C2B;
   color:#0EBFE9;
   border-radius:10px 0 0 10px;
  }

  .abi>p,.num>p{
    padding-top:15px;
  }

  .num{
   color:#2A2C2B;
   background:#0EBFE9;
   margin-right:10px;
   width:180px;
   border-radius:0 10px 10px 0;
  }

  .abi:after{
border-bottom: 10px solid transparent;
    border-left: 10px solid #2A2B2C;
    border-top: 11px solid transparent;
    content: "";
    position: absolute;
    left: 110px;
    top: 29px;
   }

以下是html

<div class="abi"><p>ABI</p></div>
<div class="num"><p>12/19</p></div>

CSS自定义形状按钮有两种颜色

5 个答案: