讓票按鈕，CSS

Question

我有設計和客戶想使按鈕只能用CSS

我找到一些方法來做到這一點，但它是不一樣的。 而我無法完善到一個完美的副本。

Answer 1

你可以使用僞元素，並從他們的影子畫背景，example：

a { 
 
    margin:3em; 
 
    font-family:arial; 
 
    text-decoration:none; 
 
    position:relative; 
 
    display:inline-block; 
 
    padding:1.5em 5em; 
 
    text-transform:uppercase; 
 
    overflow:hidden; 
 
    color:white; 
 
    border:3px solid white; 
 
    border-left:none; 
 
    border-right:none; 
 
    background:linear-gradient(to left, white 3px, transparent 3px, transparent calc(100% - 3px), white calc(100% - 3px)) top left no-repeat,linear-gradient(to left, white 3px, transparent 3px, transparent calc(100% - 3px), white calc(100% - 3px)) bottom left no-repeat; 
 
    background-size:100% 1.45em; 
 
} 
 

 
a:before,a:after { 
 
    z-index:-1; 
 
    content:''; 
 
    position:absolute; 
 
    height:1.2em; 
 
    width:1em; 
 
    top:1.4em; 
 
    border-radius:50%; 
 
    border:3px solid white; 
 
    box-shadow:0 0 0 10em #102229; 
 
} 
 
a:before { 
 
    left:-0.7em; 
 
}a:after { 
 
    right:-0.7em; 
 
} 
 
b:after { 
 
    content:'>'; 
 
    color:#DA153E; 
 
    font-weight:bold; 
 
    } 
 
body { 
 
    background:url(http://lorempixel.com/600/300); 
 
}

<a href="#"> <b>get a free quote </b></a>