Кнопка Play / Pause

Пример:

HTML:

<div class="control play">
	<span class="left"></span>
	<span class="right"></span>
</div>

</div>

CSS:

.control-wrap {
	text-align: center;
}	
.control, 
.control * {	
	box-sizing: content-box;
	letter-spacing: 0;
}
.control {
	border: 11px solid #337AB7;
	border-radius: 50%;
	margin: 20px;
	padding: 28px;
	width: 112px;
	height: 112px;
	font-size: 0;
	white-space: nowrap;
	text-align: center;
	cursor: pointer;
}
.control,
.control .left,
.control .right,
.control:before {
	display: inline-block;
	vertical-align: middle;
	transition: border 0.2s, width 0.2s, height 0.2s, margin 0.2s;
}
.control:before {
	content: "";
	height: 112px;
}
.control.pause .left,
.control.pause .right {
	margin: 0;
	border-left: 36px solid #337AB7;
	border-top: 0 solid transparent;
	border-bottom: 0 solid transparent;
	height: 98px;
}
.control.pause .left {
	border-right: 22px solid transparent;
}
.control.play .left {
	margin-left: 18px;
	border-left: 48px solid #337AB7;
	border-top: 28px solid transparent;
	border-bottom: 28px solid transparent;
	border-right: 0px solid transparent;
	height: 56px;
}
.control.play .right {
	margin: 0;
	border-left: 48px solid #337AB7;
	border-top: 28px solid transparent;
	border-bottom: 28px solid transparent;
	height: 0px;
}
.control:hover {
	border-color: #2d6b9f;
}
.control:hover .left,
.control:hover .right {
	border-left-color: #2d6b9f;
}

.control-wrap {

text-align: center;

}

.control,

.control * {

box-sizing: content-box;

letter-spacing: 0;

}

.control {

border: 11px solid #337AB7;

border-radius: 50%;

margin: 20px;

padding: 28px;

width: 112px;

height: 112px;

font-size: 0;

white-space: nowrap;

text-align: center;

cursor: pointer;

}

.control,

.control .left,

.control .right,

.control:before {

display: inline-block;

vertical-align: middle;

transition: border 0.2s, width 0.2s, height 0.2s, margin 0.2s;

}

.control:before {

content: "";

height: 112px;

}

.control.pause .left,

.control.pause .right {

margin: 0;

border-left: 36px solid #337AB7;

border-top: 0 solid transparent;

border-bottom: 0 solid transparent;

height: 98px;

}

.control.pause .left {

border-right: 22px solid transparent;

}

.control.play .left {

margin-left: 18px;

border-left: 48px solid #337AB7;

border-top: 28px solid transparent;

border-bottom: 28px solid transparent;

border-right: 0px solid transparent;

height: 56px;

}

.control.play .right {

margin: 0;

border-left: 48px solid #337AB7;

border-top: 28px solid transparent;

border-bottom: 28px solid transparent;

height: 0px;

}

.control:hover {

border-color: #2d6b9f;

}

.control:hover .left,

.control:hover .right {

border-left-color: #2d6b9f;

}

JS:

$('.control').on('click', function() {
	$(this).toggleClass('pause play');
});

$('.control').on('click', function() {

$(this).toggleClass('pause play');

});

Найдено на codepen.io у пользователя Caroline Artz

Пример:

HTML:

CSS:

JS:

Смотрите также:

Добавить комментарий: