<div class="container">
<div class="main-button-part">
<div class="button">
<p>Lorem ipsum</p>
<p class="title">start</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ducimus, ipsum aliquam eligendi iure </p>
</div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
<div class="other-button-part">
<div class="other-button-part--group">
<div class="other-button-part__label">
<div class="other-button-part__label-wrap">
<div class="other-button-part__num">
<div class="other-button-part__num--shape">
<div> <span>A</span></div>
</div>
</div>
<div class="other-button-part__text">
<p>Lorem ipsum</p>
<p>Lorem ipsum dolor sit amet consectetur. </p>
</div>
</div>
</div>
<div class="other-button-part__label">
<div class="other-button-part__label-wrap">
<div class="other-button-part__num">
<div class="other-button-part__num--shape">
<div> <span>B</span></div>
</div>
</div>
<div class="other-button-part__text">
<p>Lorem ipsum</p>
<p>Lorem ipsum dolor sit amet consectetur. </p>
</div>
</div>
</div>
<div class="other-button-part__label">
<div class="other-button-part__label-wrap">
<div class="other-button-part__num">
<div class="other-button-part__num--shape">
<div> <span>C</span></div>
</div>
</div>
<div class="other-button-part__text">
<p>Lorem ipsum</p>
<p>Lorem ipsum dolor sit amet consectetur. </p>
</div>
</div>
</div>
<div class="other-button-part__label">
<div class="other-button-part__label-wrap">
<div class="other-button-part__num">
<div class="other-button-part__num--shape">
<div> <span>D</span></div>
</div>
</div>
<div class="other-button-part__text">
<p>Lorem ipsum</p>
<p>Lorem ipsum dolor sit amet consectetur. </p>
</div>
</div>
</div>
<div class="other-button-part__label">
<div class="other-button-part__label-wrap">
<div class="other-button-part__num">
<div class="other-button-part__num--shape">
<div> <span>E</span></div>
</div>
</div>
<div class="other-button-part__text">
<p>Lorem ipsum</p>
<p>Lorem ipsum dolor sit amet consectetur. </p>
</div>
</div>
</div>
</div>
</div>
</div>
<svg class="svg">
<clipPath id="my-clip-path" clipPathUnits="objectBoundingBox">
<path d="M0,0,0,1 C0.8,1.2,0.2,0.2,1,0"></path>
</clipPath>
</svg>$main-color: #505a73;
$gradient1-to: #383e4c;
$gradient2-from: #eae9ef;
$gradient2-to: #bbbbbb;
$gradient1-from: $main-color;
$button-shadow: #5a5a5a;
$button-size: 300px;
$buttons-drop-shadow: drop-shadow(1px 0px 2px $button-shadow);
$transition: 1s;
$transition-c: .25;
$dot: 20px;
$label-margin: 30px;
$font: 'Quicksand';
@mixin button-sadow {
background: linear-gradient(135deg, $gradient2-from 40%, $gradient2-to);
filter: $buttons-drop-shadow;
filter: $buttons-drop-shadow;
}
@mixin transition($duration, $delay) {
transition: all $transition * $duration $transition * $duration * $delay ease-in;
}
@import url('https://fonts.googleapis.com/css2?family=#{$font}:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=#{$font}:wght@500&display=swap');
html {
height: 100%;
font-size: 14px;
}
body {
display: flex;
flex-flow: column;
justify-content: center;
height: 100%;
background-color: #ebeaef;
color: #fff;
font-family: $font;
font-weight: 300;
padding: 80px 0;
.container {
display: flex;
height: 100%;
padding: 80px 0;
min-width: 1400px;
.main-button-part {
position: relative;
padding: 20px;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
&::before {
content: '';
width: $button-size + $button-size/10;
height: $button-size + $button-size/10;
border-radius: 50%;
position: absolute;
z-index: -1;
@include button-sadow;
}
.button {
width: $button-size;
height: $button-size;
border-radius: 50%;
background: linear-gradient(135deg, $gradient1-from 30%, $gradient1-to);
position: absolute;
cursor: pointer;
text-align: center;
display: flex;
flex-flow: column;
justify-content: center;
filter: drop-shadow(1px 1px 3px black);
filter: drop-shadow(1px 1px 3px black);
transition: all $transition * .1;
p:first-child {
text-transform: uppercase;
margin: 10px auto;
width: 80%;
margin: 0 auto;
padding: 0;
}
.title {
margin: 0 auto;
text-transform: uppercase;
font-size: 2.5rem;
font-weight: 100;
border-bottom: 1px solid #fff;
width: 80%;
padding: 7px;
}
p {
width: 80%;
margin: 0 auto;
padding: 10px;
}
&.active {
background: radial-gradient($gradient1-to, $gradient1-from);
filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0));
filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0));
}
}
.dot {
position: absolute;
width: $dot;
height: $dot;
border-radius: 50%;
}
.dot:nth-child(2) {
background: #f3ec67;
top: calc(50% - 175px);
right: calc(50% - 170px);
@include transition($transition-c, 1);
&.not-active {
@include transition($transition-c, 5);
top: calc(50% - 175px);
right: calc(50% - 170px);
}
}
.dot:nth-child(3) {
background: #e9c143;
top: calc(50% - 104px);
right: calc(50% - 222px);
@include transition($transition-c, 2);
&.not-active {
@include transition($transition-c, 4);
top: calc(50% - 175px);
right: calc(50% - 170px);
}
}
.dot:nth-child(4) {
background: #eb8acd;
top: calc(50% - 10px);
right: calc(50% - #{ $button-size * 0.82 });
@include transition($transition-c, 3);
&.not-active {
@include transition($transition-c, 3);
top: calc(50% - 104px);
right: calc(50% - 222px);
}
}
.dot:nth-child(5) {
background: #be7bea;
top: calc(50% + 80px);
right: calc(50% - 222px);
@include transition($transition-c, 4);
&.not-active {
@include transition($transition-c, 2);
top: calc(50% - 10px);
right: calc(50% - #{ $button-size * 0.82 });
}
}
.dot:nth-child(6) {
background: #61c0ec;
top: calc(50% + 155px);
right: calc(50% - 170px);
@include transition($transition-c, 5);
&.not-active {
@include transition($transition-c, 1);
top: calc(50% + 80px);
right: calc(50% - 222px);
}
}
}
.other-button-part {
flex: 2;
display: flex;
align-items: center;
.other-button-part--group {
position: relative;
height: ($button-size/3 + $label-margin) * 4;
width: 100%;
}
&__label {
width: $button-size * 1.5;
height: $button-size / 3;
border-radius: 50px;
position: absolute;
@include button-sadow;
&-wrap {
content: "";
width: 430px;
height: 80px;
border-radius: 50px;
position: absolute;
left: 10px;
top: 10px;
//background: $main-color;
display: flex;
flex-flow: row nowrap;
overflow: hidden;
.other-button-part__num {
width: 190px;
position: relative;
font-size: 2.5rem;
font-weight: 500;
z-index: 2;
filter: drop-shadow(8px 1px 8px rgba(0, 0, 0, 0.616));
filter: drop-shadow(8px 1px 8px rgba(0, 0, 0, 0.616));
&--shape {
width: 100%;
height: 100%;
clip-path: url(#my-clip-path);
clip-path: url(#my-clip-path);
div {
background:
radial-gradient(circle, #e6e6e626, #ffffff47),
linear-gradient(135deg, #eae9ef 40%, rgba(132, 136, 133, 0.70));
border-radius: 50%;
color: black;
width: 66px;
height: 66px;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 7px;
left: 7px;
cursor: pointer;
filter: drop-shadow(1px 1px 2px $button-shadow);
filter: drop-shadow(1px 1px 2px $button-shadow);
}
&::before {
// content: '';
position: absolute;
width: 30px;
height: 30px;
width: 100px;
height: 100px;
left: 97%;
}
}
}
.other-button-part__text {
width: 100%;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
padding-left: 0px;
padding-right: 30px;
box-sizing: border-box;
background: linear-gradient(to right, $main-color, $gradient1-to);
margin-left: -25%;
padding-left: 100px;
border-radius: 0px 50px 50px 0px;
p {
font-size: 1rem;
margin: 0px;
}
p:first-child {
font-size: 1.2rem;
text-transform: uppercase;
letter-spacing: 3px;
font-weight: 500;
}
}
}
}
&__label:nth-child(1) {
top: calc(0% - 50px);
left: -62px;
@include transition($transition-c, 1);
.other-button-part__num--shape {
background: linear-gradient(to right, #f3ec67 30%, #ffc300);
}
.other-button-part__text {
& p:first-child {
color: #f3ec67;
}
}
&.not-active {
@include transition($transition-c, 5);
}
}
&__label:nth-child(2) {
top: calc(25% - 50px);
left: 53px;
@include transition($transition-c, 2);
.other-button-part__num--shape {
background: linear-gradient(to right, #e9c143 30%, #fd6800);
}
.other-button-part__text {
& p:first-child {
color: #e9c143;
}
}
&.not-active {
@include transition($transition-c, 4);
}
}
&__label:nth-child(3) {
top: calc(50% - 50px);
left: 83px;
@include transition($transition-c, 3);
.other-button-part__num--shape {
background: linear-gradient(to right, #eb8acd 30%, #d401af);
}
.other-button-part__text {
& p:first-child {
color: #eb8acd;
}
}
&.not-active {
@include transition($transition-c, 3);
}
}
&__label:nth-child(4) {
top: calc(75% - 50px);
left: 53px;
@include transition($transition-c, 4);
.other-button-part__num--shape {
background: linear-gradient(to right, #be7bea 30%, #4700d2);
}
.other-button-part__text {
& p:first-child {
color: #be7bea;
}
}
&.not-active {
@include transition($transition-c, 2);
}
}
&__label:nth-child(5) {
top: calc(100% - 50px);
left: -62px;
transition: all $transition * $transition-c $transition * $transition-c * 4;
@include transition($transition-c, 5);
.other-button-part__num--shape {
background: linear-gradient(to right, #61c0ec 30%, #0045d2);
}
.other-button-part__text {
& p:first-child {
color: #61c0ec;
}
}
&.not-active {
@include transition($transition-c, 1);
}
}
}
.not-active {
opacity: 0;
filter: drop-shadow(0px 0px 0px transparent);
filter: drop-shadow(0px 0px 0px transparent);
}
}
}$('.other-button-part__label').addClass('not-active');
$('.dot').addClass('not-active');
$('.button').on('click',()=>{
$('.other-button-part__label').toggleClass('not-active');
$('.dot').toggleClass('not-active');
$('.button').toggleClass('active');
})
External CSS
This Pen doesn't use any external CSS resources.