4

Есть SVG файл с дизайном кнопки - https://yadi.sk/d/ueGSqTix3U4tjc

Нужно чтобы получилась вот такая кнопка и работали все 3 кнопки (представить, наши презентации PDF, видео) введите сюда описание изображения

Подскажите, пожалуйста как это все осуществить

2
  • Решение на чистом CSS не подойдет? Зачем для этого svg? 3 апр 2018 в 23:26
  • ты можешь в :before у блока справа сделать width: 10px и height: 10px (примерно) position:absolute, выровняй как тебе необходимо и на background-image поставь эту полукруглую картинку с треугольником) только у родителя position:relative не забудь указать 4 апр 2018 в 2:09

1 ответ 1

11

Мой костыль, не знаю подойдет или нет. Без нужного шрифта, цвета и размеров.

.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">&#9658;</a>
		</div>
	</div>
</div>

1
  • Спасибо, ваш "костыль" идеально вписался в проект :) 4 апр 2018 в 14:37

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.