پیشنمایش زنده
کد HTML
<div class="add">
<a href="">
<svg id="fileIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
stroke="none"
d="M14,0H3A1,1,0,0,0,2,1V23a1,1,0,0,0,1,1H21a1,1,0,0,0,1-1V8H15a1,1,0,0,1-1-1ZM5,17H19v2H5Zm0-5H19v2H5Zm6-3H5V7h6Z"
></path>
<polygon stroke="none" points="21.414 6 16 6 16 0.586 21.414 6"></polygon>
</svg>
</a>
<a href="">
<svg id="imageIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<circle stroke="none" cx="9" cy="8" r="2"></circle>
<path
stroke="none"
d="M23,1H1C0.448,1,0,1.447,0,2v20c0,0.553,0.448,1,1,1h22c0.552,0,1-0.447,1-1V2C24,1.447,23.552,1,23,1z M22,3v12l-5-5l-6,7l-5-4l-4,4V3H22z"
></path>
</svg>
</a>
<a href="">
<svg id="mailIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
stroke="none"
d="M21,2H3A3,3,0,0,0,0,5V19a3,3,0,0,0,3,3H21a3,3,0,0,0,3-3V5A3,3,0,0,0,21,2ZM8.207,15.207l-2.5,2.5a1,1,0,0,1-1.414-1.414l2.5-2.5Zm11.5,2.5a1,1,0,0,1-1.414,0l-2.5-2.5,1.414-1.414,2.5,2.5A1,1,0,0,1,19.707,17.707Zm0-10-7,7a1,1,0,0,1-1.414,0l-7-7A1,1,0,0,1,5.707,6.293L12,12.586l6.293-6.293a1,1,0,1,1,1.414,1.414Z"
></path>
</svg>
</a>
<a href="">
<svg id="chatIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<g stroke="none">
<path
d="M21.965,9.575C21.604,14.821,16.384,19,10,19c-0.465,0-0.931-0.026-1.394-0.072 c2.013,1.586,4.939,2.376,7.946,1.967L22,23.618v-5.215c1.293-1.243,2-2.791,2-4.403C24,12.373,23.277,10.822,21.965,9.575z"
></path>
<path
d="M10,1C4.477,1,0,4.582,0,9c0,1.797,0.75,3.45,2,4.785V19l4.833-2.416C7.829,16.85,8.892,17,10,17 c5.523,0,10-3.582,10-8S15.523,1,10,1z"
></path>
</g>
</svg>
</a>
</div>
کد CSS
/* Refactored by Zaiko */
/* OG by Aaron Iker */
/* --- Global Color Variables (Optional) --- */
:root {
--button-color: #5628ee;
--icons-color: #fff;
--plus-color: #fff;
--scale: 1;
}
/* --- Button --- */
.add {
width: 84px;
height: 84px;
position: relative;
display: flex;
flex-direction: column;
flex-wrap: wrap;
transform: scale(0.5);
transform-origin: 50% 50%;
transition: transform 0.4s ease;
}
.add a {
display: block;
position: relative;
width: 50%;
padding-bottom: 50%;
background: var(--button-color, #5628ee);
-webkit-backface-visibility: hidden;
backface-visibility: hidden; /* Agregado para consistencia */
transition:
border-radius 0.3s ease,
transform 0.2s ease;
}
.add a svg {
display: block;
width: 14px;
height: 14px;
position: absolute;
left: 50%;
top: 50%;
margin: -7px 0 0 -7px;
opacity: 0;
fill: var(--icons-color, #fff);
transform: scale(0.6) rotate(-45deg);
transition: all 0.15s ease;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
/* Corner Radii */
.add a:nth-child(1) {
border-radius: 8px 0 0 0;
}
.add a:nth-child(2) {
border-radius: 0 0 0 8px;
}
.add a:nth-child(3) {
border-radius: 0 8px 0 0;
}
.add a:nth-child(4) {
border-radius: 0 0 8px 0;
}
/* The Plus Sign (+) */
.add:before,
.add:after {
content: "";
width: 28px;
height: 6px;
border-radius: 3px;
background: var(--plus-color, #fff);
position: absolute;
left: 50%;
top: 50%;
display: block;
z-index: 1;
transform-origin: 50% 50%;
transition:
transform 0.25s ease,
opacity 0.25s ease;
}
.add:before {
transform: translate(-50%, -50%) scaleY(0.76);
}
.add:after {
transform: translate(-50%, -50%) rotate(90deg) scaleY(0.76);
}
/* --- Hover State (Expanded) --- */
.add:hover {
transform: scale(1) rotate(45deg);
transition: transform 0.4s ease 0.1s;
}
.add:hover:before,
.add:hover:after {
opacity: 0;
transform: translate(-50%, -50%) rotate(0deg) scale(0);
transition:
transform 0.15s ease,
opacity 0.15s ease;
}
.add:hover a {
--scale: 1;
pointer-events: none;
border-radius: 50%;
animation: pointerEvent 0s linear forwards 0.4s;
transition:
border-radius 0.15s ease 0.1s,
transform 0.25s ease 0.15s;
}
/* Transform */
.add:hover a:nth-child(1) {
transform: translate(-6px, -6px) scale(var(--scale));
}
.add:hover a:nth-child(2) {
transform: translate(-6px, 6px) scale(var(--scale));
}
.add:hover a:nth-child(3) {
transform: translate(6px, -6px) scale(var(--scale));
}
.add:hover a:nth-child(4) {
transform: translate(6px, 6px) scale(var(--scale));
}
.add:hover a svg {
opacity: 0.7;
transition: all 0.3s ease 0.2s;
transform: scale(1) rotate(-45deg);
}
.add:hover a:hover {
--scale: 0.92;
transition:
border-radius 0.2s ease 0.1s,
transform 0.25s ease 0s;
}
.add:hover a:hover svg {
opacity: 1;
transition: all 0.3s ease 0s;
}
/* --- Keyframes --- */
@keyframes pointerEvent {
100% {
pointer-events: auto;
}
}