button

by vvs10

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div class="pleer-controls">
				<div class="pleer-controls__left"></div>
        
				<div class="pleer-controls__play">
				</div>
        
				<div class="pleer-controls__right"></div>
			</div>
</body>
</html>

SCSS

.pleer-controls {
	text-align: center;
	display: flex;
	justify-content: center;
  	align-items: center;
	position: relative;
	margin: 0 auto;
	width: 70%;
	padding-bottom: 55px;
  
	&__play {
		width: 90px;
		height: 80px;
		position: relative;
		margin: 0 40px;
		background: linear-gradient(137.54deg, #F0F7FF 4.98%, #E3E8F2 94.88%);
		box-shadow: 10px 10px 20px rgba(166, 180, 200, 0.7), -12px -12px 20px rgba(255, 255, 255, 0.8);
		border-radius: 20px;

			
}
	&__play:hover {
		background: linear-gradient(137.54deg, #754FFF 4.98%, #3800FF 94.88%);
		box-shadow: inset 8px 8px 28px rgba(0, 0, 0, 0.15), inset -8px -8px 28px rgba(255, 255, 255, 0.4);
		border-radius: 20px;
 
	}
	&__pause{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
		



	&__left {
		width: 90px;
		height: 80px;
		position: relative;
		background: linear-gradient(137.54deg, #F0F7FF 4.98%, #E3E8F2 94.88%);
		box-shadow: 10px 10px 20px rgba(166, 180, 200, 0.7), -12px -12px 20px rgba(255, 255, 255, 0.8);
		border-radius: 20px;

			
}
	&__left:hover {
		background: linear-gradient(137.54deg, #754FFF 4.98%, #3800FF 94.88%);
		box-shadow: inset 8px 8px 28px rgba(0, 0, 0, 0.15), inset -8px -8px 28px rgba(255, 255, 255, 0.4);
		border-radius: 20px;

		}
	&__right {
		width: 90px;
		height: 80px;
		position: relative;
		background: linear-gradient(137.54deg, #F0F7FF 4.98%, #E3E8F2 94.88%);
		box-shadow: 10px 10px 20px rgba(166, 180, 200, 0.7), -12px -12px 20px rgba(255, 255, 255, 0.8);
		border-radius: 20px;

			
}
	&__right:hover {
		background: linear-gradient(137.54deg, #754FFF 4.98%, #3800FF 94.88%);
		box-shadow: inset 8px 8px 28px rgba(0, 0, 0, 0.15), inset -8px -8px 28px rgba(255, 255, 255, 0.4);
		border-radius: 20px;
		path {
			stroke: #fff;
		}
		}

}