Сделать кнопку билет с помощью 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>