<div class="wrapper">
<div class="button">
<div class="button__circle">
<div class="button__circle-shadow"></div>
</div>
<div class="button__body">Button</div>
</div>
</div>$circle-size: 50px;
$transition: 0.3s;
$base-shift: translateX(-$circle-size * 0.25);
$hover-shift: translateX(-$circle-size * 0.75);
$circle-color: #F79854;
$button-color: linear-gradient(90deg, #427C33 0%, #6EBC5A 100%);
$blend-color: mix(#F79854, #427C33);
.wrapper {
width: 500px;
height: 500px;
display: flex;
align-content: center;
justify-content: center;
}
.button {
$block: &;
height: $circle-size;
display: flex;
cursor: pointer;
&__circle,
&__circle-shadow {
height: $circle-size;
width: $circle-size;
border-radius: 50%;
}
&__circle {
position: relative;
z-index: 2;
background: $circle-color;
overflow: hidden;
}
&__circle-shadow {
position: absolute;
left: 100%;
background: $blend-color;
transition: $transition;
transform: $base-shift;
#{$block}:hover & {
transform: $hover-shift;
}
}
&__body {
height: $circle-size;
width: $circle-size * 6;
display: flex;
align-items: center;
justify-content: center;
color: white;
background: $button-color;
border-radius: $circle-size;
transition: $transition;
transform: $base-shift;
#{$block}:hover & {
transform: $hover-shift;
}
}
}
html,
body {
height: 100%;
}position: relative;
height: 100%;min-height: 100vh;
var boxResult = document.getElementById("elementID");
var wrapperBlock = document.createElement("div");
var notifyBlock = document.createElement("div");
var linkBlock = document.createElement("a");
switch(true){
case (num_notify > count_items):
notifyBlock.classList.add("ta-left");
notifyBlock.setAttribute("style", "float: left");
linkBlock.setAttribute("href", "javascript:void(0)");
linkBlock.onclick(function(){
// если у вас нет единой функции-обработчика
});
linkBlock.innerText = "Назад";
notifyBlock.appendChild(linkBlock);
break;
case(num_notify < count_notify[type_notify]):
notifyBlock.classList.add("ta-right");
notifyBlock.setAttribute("style", "float: right");
linkBlock.setAttribute("href", "javascript:void(0)");
linkBlock.onclick(function(){
// если у вас всё ещё нет единой функции-обработчика
});
linkBlock.innerText = "Дальше";
notifyBlock.appendChild(linkBlock);
break;
default:
notifyBlock.setAttribute("style", "clear:both");
}
wrapperBlock.appendChild(notifyBlock);
boxResult.appendChild(wrapperBlock);