2016-09-27 9 views
1

右側の矢印placedoでボタンを作成する方法:CSS:私はボタン以下に再現する必要がある

enter image description here

は、私はすでにそれを作成しようとしましたが、右側の矢印ではありません写真と同じです。同じ白い矢印をどのように再現できますか?ここで

.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/

+0

⏵= '⏵'あなたがUnicode文字を使用することができますし、 '色を設定youlに役立つことがあります白; 'あなたのCSSで – Roy123

答えて

1

私はあなた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; 
} 
+0

こんにちはデビュー ありがとう! – Daniel

+0

ダニエルあなたは大歓迎です! 'border-width:15px 0 15px 13px;'は矢印の大きさを変えることができることに注意してください.15pxの値はすべて高さであり、最後の13pxの値は幅です。しかし、これは右向きの矢印だけに適用できます。このウェブサイトで遊ぶことができます:http://apps.eky.hk/css-triangle-generator/ – debute

0

.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>

1

が、これは

.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>

関連する問題