Победи себя и выиграешь тысячи битв.
6-декабря-2023, 21:59 15 0
Простая красивая новогодняя кнопка на верх для сайта в виде Санта Клауса.
HTML
<div class="santa-container">
<a href="#">
<span class="santa">
<span class="cap"></span>
<span class="head">
<span class="eyes"></span>
</span>
<span class="hand"></span>
<span class="hand left"></span>
<span class="body">
<span class="arrow"></span>
</span>
<span class="legs"></span>
</span>
</a>
</div>
CSS
Изменить масштаб Санты можно через свойство transform: scale(0.3);
:root{
scroll-behavior:smooth
}
.santa-container {
position: fixed;
z-index: 99999;
bottom: 10px;
right: 110px;
transform: scale(0.3);
}
.santa-container *,
.santa-container *:after,
.santa-container *:before {
box-sizing: border-box;
content: '';
position: absolute;
border-radius: 50%;
box-shadow: 0 4px 10px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.1);
}
.santa {
width: 300px;
height: 300px;
margin: auto;
left: 0;
right: 0;
bottom: 75px;
z-index: 25;
}
.santa:after {
background: #3e3e3e;
position: absolute;
width: 200px;
height: 200px;
z-index: 1;
right: -10px;
top: -5px;
}
.santa .cap {
background: #fff;
width: 20px;
height: 20px;
left: 0;
right: 0;
margin: auto;
z-index: 7;
top: -85px;
}
.santa .cap:after {
width: 70px;
height: 70px;
background: #f00;
left: -24px;
top: 9px;
z-index: 3;
}
.santa .cap:before {
background: #fff;
width: 80px;
height: 50px;
left: -30px;
z-index: 5;
top: 23px;
border-radius: 50% 50% 0 0;
}
.santa .head {
background: #E2D7C7;
z-index: 10;
width: 50px;
height: 50px;
left: 0;
right: 0;
margin: auto;
top: -40px;
}
.santa .head:before {
width: 100px;
height: 100px;
background: #fff;
top: 10px;
left: -25px;
}
.santa .head:after {
background: #E2D7C7;
width: 24px;
height: 12px;
z-index: 3;
left: 0;
right: 0;
margin: auto;
top: 30px;
border-radius: 0 0 20px 20px;
}
.santa .head .eyes {
width: 8px;
height: 8px;
background: #000;
z-index: 4;
left: 14px;
top: 5px;
box-shadow: 15px 0 #3e3e3e;
}
.santa .body {
left: 0;
top: 0;
width: 300px;
height: 300px;
background: #f00;
overflow: hidden;
z-index: 5;
}
.santa .arrow {
background-image: url("dаta:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='18 15 12 9 6 15'%3e%3c/polyline%3e%3c/svg%3e");
background-repeat: no-repeat;
background-size: cover;
width: 250px;
height: 250px;
left: 30px;
top: 52px;
transition: 0.2s;
}
.santa .arrow:hover {
top: 40px;
}
.santa .hand {
left: -20px;
top: 120px;
background: #fff;
height: 60px;
width: 60px;
z-index: 7;
}
.santa .hand:after {
height: 30px;
width: 30px;
background: #E2D7C7;
left: 20px;
bottom: 10px;
}
.santa .hand.left {
left: auto;
right: 45px;
top: 5px;
}
.santa .hand.left:after {
bottom: 30px;
left: 12px;
}
.santa .legs,
.santa .legs:after {
width: 20px;
height: 60px;
z-index: 10;
background: #f00;
bottom: -45px;
left: 128px;
border-radius: 0 0 10px 10px;
border-bottom: 20px solid #3e3e3e;
}
.santa .legs:after {
left: 31px;
bottom: -20px;
}
.dmtop {
display: none;
}
Вот в принципе и всё. Всех с наступающими праздниками!!!