CSS：如何创建一个按钮，右边的箭头placedo

我已经尝试创建它，但在右边的箭头是不是与图中相同。我怎样才能重现相同的白色箭头？

.sBtn { 
display: inline-block; 
background: #908589; 
border: 0; 
color: #fff; 
font-weight: 700; 
font-size: 1.2em; 
letter-spacing: 0.04em; 
line-height: 2.5em; 
padding: 0 0 0 1em; 
outline: none; 
text-decoration: none; 
margin-top: 14px; 

} 

...and so on...

https://jsfiddle.net/jobgaraux/h81z00jL/1/

来源

2016-09-27 Daniel

⏵='⏵'你可以使用Unicode字符，并设置'颜色：白色;'在你的css – Roy123

这里我把它给你jsFiddle

编辑HTML：

<span class="arrowBtn">&nbsp;<span class="icon"></span></span>

您可以从边界创建CSS3箭头：

.sBtn-go .arrowBtn .icon { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    width: 0; 
    height: 0; 
    border-style: solid; 
    border-width: 15px 0 15px 13px; 
    border-color: transparent transparent transparent white; 
}

来源

2016-09-27 09:38:17 debute

你好首尔非常感谢！ – Daniel

@丹尼尔，不客气！请注意'border-width：15px 0 15px 13px;'可以改变箭头的大小，15px的值都是高度，最后13px的值是宽度。但是，这可以适用于右侧的箭头。你可以在这个网站上玩：http://apps.eky.hk/css-triangle-generator/ – debute

.sBtn { 
 
    display: inline-block; 
 
    background: #908589; 
 
    border: 0; 
 
     color: #fff; 
 
    font-weight: 700; 
 
    font-size: 1.2em; 
 
    letter-spacing: 0.04em; 
 
    line-height: 2.5em; 
 
    padding: 0 0 0 1em; 
 
    outline: none; 
 
    text-decoration: none; 
 
    margin-top: 14px; 
 
    
 
    } 
 

 
    .arrowBtn { 
 
    display: inline-block; 
 
    line-height: 2.5em; 
 
    text-align: center; 
 
    background: #333; 
 
    color: white; 
 
    font-size: 1em; 
 
    width: 2.5em; 
 
    transition: margin 200ms; 
 
    margin-left: .75em; 
 
    } 
 

 

 

 
.sBtn-go .arrowBtn { 
 
    background-color: #B6AFB1; 
 
    } 
 
    .sBtn-go .arrowBtn:hover { 
 
    } 
 
    .sBtn-go .arrowBtn { 
 
     background-color: desaturate(darken(#F8AD6C,5%),5%); 
 
    }

<button class="sBtn sBtn-go" name="search">Search<span class="arrowBtn">&#x25BA</span></button>

来源

2016-09-27 09:34:31 Gowtham

可能，这将有助于烈

.sBtn { 
 
    display: inline-block; 
 
    background: #908589; 
 
    border: 0; 
 
     color: #fff; 
 
    font-weight: 700; 
 
    font-size: 1.2em; 
 
    letter-spacing: 0.04em; 
 
    line-height: 2.5em; 
 
    padding: 0 0 0 1em; 
 
    outline: none; 
 
    text-decoration: none; 
 
    margin-top: 14px; 
 
    
 
    } 
 

 
    .arrowBtn { 
 
    display: inline-block; 
 
    line-height: 2.5em; 
 
    text-align: center; 
 
    background: #333; 
 
    color: white; 
 
    font-size: 1em; 
 
    width: 2.5em; 
 
    transition: margin 200ms; 
 
    margin-left: .75em; 
 
    position:relative; 
 
    left:2px; 
 
    } 
 

 

 

 
.sBtn-go .arrowBtn { 
 
    background-color: #B6AFB1; 
 
    } 
 
    .sBtn-go .arrowBtn:hover { 
 
    } 
 
    .sBtn-go .arrowBtn { 
 
     background-color: desaturate(darken(#F8AD6C,5%),5%); 
 
    }

<button class="sBtn sBtn-go" name="search">Search<span class="arrowBtn">&#x25BA</span></button>

来源

2016-09-27 09:40:26

CSS：如何创建一个按钮，右边的箭头placedo

回答

相关问题