Есть SVG файл с дизайном кнопки - https://yadi.sk/d/ueGSqTix3U4tjc
Нужно чтобы получилась вот такая кнопка и работали все 3 кнопки (представить, наши презентации PDF, видео)
Подскажите, пожалуйста как это все осуществить
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуЕсть SVG файл с дизайном кнопки - https://yadi.sk/d/ueGSqTix3U4tjc
Нужно чтобы получилась вот такая кнопка и работали все 3 кнопки (представить, наши презентации PDF, видео)
Подскажите, пожалуйста как это все осуществить
Мой костыль, не знаю подойдет или нет. Без нужного шрифта, цвета и размеров.
.wrapper {
width: 500px;
padding: 20px;
margin: 0 auto;
margin-top: 50px;
font-family: 'Arial', sans-serif;
display: flex;
flex-direction: row;
justify-content: center;
}
.left, .right {
width: 50%;
text-align: center;
}
.left span, .right span {
color: #fff;
}
.left .button {
border-right: 1px solid #fff;
border-radius: 30px 0 0 30px;
}
.right .button {
border-left: 1px solid #fff;
border-radius: 0 30px 30px 0;
}
.button {
width: 100%;
padding: 15px 0;
background: #ecd114;
text-transform: uppercase;
text-decoration: none;
box-sizing: border-box;
font-weight: bold;
display: block;
color: #000;
}
.button, .play {
transition: .25s background ease;
}
.button:hover, .play:hover {
background: #ecc114;
}
.or-and-play {
width: 138px;
height: 50%;
margin: 0 auto;
position: relative;
background: #ecd114;
font-weight: bold;
}
.or-and-play:before, .or-and-play:after {
content: '';
width: 46px;
height: 100%;
position: absolute;
background: #fff;
}
.or-and-play:before {
border-radius: 0 25px 0 0;
left: 0;
}
.or-and-play:after {
border-radius: 25px 0 0 0;
right: 0;
}
.or-and-play span, .play {
position: absolute;
transform: translate(-50%, 0);
text-transform: uppercase;
}
.or-and-play span {
z-index: 2;
font-size: 14px;
left: 50%;
top: -50%;
}
.play {
width: 46px;
padding: 15px 0;
line-height: 1;
background: #ecd114;
text-decoration: none;
border-radius: 50%;
color: #000;
top: 10%;
}
<div class="wrapper">
<div class="left">
<a href="#" class="button">Представить</a>
</div>
<div class="right">
<a href="#" class="button">Наша презентация <span>PDF</span></a>
<div class="or-and-play">
<span>или</span>
<a href="#" class="play">►</a>
</div>
</div>
</div>