پیشنمایش زنده
کد HTML
<button class="btn-small">
<div class="btn-small-content">
<div class="btn-small-icon">
<svg
xml:space="preserve"
style="enable-background:new 0 0 80 80;"
viewBox="0 0 80 80"
height="40px"
width="40px"
y="0px"
x="0px"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
>
<g>
<path
d="M64,48L64,48h-8V32h8c8.836,0,16-7.164,16-16S72.836,0,64,0c-8.837,0-16,7.164-16,16v8H32v-8c0-8.836-7.164-16-16-16
S0,7.164,0,16s7.164,16,16,16h8v16h-8l0,0l0,0C7.164,48,0,55.164,0,64s7.164,16,16,16c8.837,0,16-7.164,16-16l0,0v-8h16v7.98
c0,0.008-0.001,0.014-0.001,0.02c0,8.836,7.164,16,16,16s16-7.164,16-16S72.836,48.002,64,48z M64,8c4.418,0,8,3.582,8,8
s-3.582,8-8,8h-8v-8C56,11.582,59.582,8,64,8z M8,16c0-4.418,3.582-8,8-8s8,3.582,8,8v8h-8C11.582,24,8,20.417,8,16z M16,72
c-4.418,0-8-3.582-8-8s3.582-8,8-8l0,0h8v8C24,68.418,20.418,72,16,72z M32,48V32h16v16H32z M64,72c-4.418,0-8-3.582-8-8l0,0v-8
h7.999c4.418,0,8,3.582,8,8S68.418,72,64,72z"
></path>
</g>
</svg>
</div>
<p class="btn-small-text">command</p>
</div>
</button>
کد CSS
.btn-small {
position: relative;
padding: 0;
width: 100px; /* Smaller width */
height: 100px; /* Smaller height */
border: 2px solid #888888;
outline: none;
background-color: #f4f5f6;
border-radius: 20px; /* Adjusted border-radius */
box-shadow:
-3px -10px 15px #ffffff,
-3px -5px 8px #ffffff,
-10px 0px 15px #ffffff,
3px 10px 12px rgba(0, 0, 0, 0.2);
transition: 0.3s ease-in-out; /* Smooth animation */
cursor: pointer;
}
/* Hover animation: Scaling the button and adjusting shadow */
.btn-small:hover {
transform: scale(1.1); /* Button grows slightly */
box-shadow:
-3px -15px 20px #ffffff,
-3px -10px 10px #ffffff,
-10px 0px 15px #ffffff,
5px 15px 15px rgba(0, 0, 0, 0.3);
}
/* Active click animation */
.btn-small:active {
transform: scale(0.95); /* Button shrinks slightly */
box-shadow: none; /* Shadow disappears when clicked */
}
.btn-small-content {
position: relative;
display: grid;
padding: 10px; /* Smaller padding */
width: 100%;
height: 100%;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
box-shadow:
inset 0px -4px 0px #dddddd,
0px -4px 0px #f4f5f6;
border-radius: 20px;
transition: 0.3s ease-in-out; /* Smooth animation */
z-index: 1;
}
/* Icon hover effect: Floating effect */
.btn-small-icon {
position: relative;
display: flex;
transform: translate3d(0px, -2px, 0px);
grid-column: 4;
align-self: start;
justify-self: end;
width: 16px; /* Smaller icon size */
height: 16px;
transition: 0.3s ease-in-out; /* Smooth hover animation */
}
/* Hover effect on icon */
.btn-small:hover .btn-small-icon {
transform: translateY(-8px); /* Move the icon up slightly on hover */
}
/* Icon styling */
.btn-small-icon svg {
width: 16px; /* Smaller icon */
height: 16px;
fill: #aaaaaa;
}
/* Text hover effect: Floating effect */
.btn-small-text {
position: relative;
transform: translate3d(0px, -2px, 0px); /* Smaller translation */
margin: 0;
align-self: end;
grid-column: 1 / 5;
grid-row: 2;
text-align: center;
font-size: 16px; /* Smaller font size */
background-color: #888888;
color: transparent;
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
-webkit-background-clip: text;
background-clip: text;
transition: 0.3s ease-in-out;
}
/* Hover effect on text */
.btn-small:hover .btn-small-text {
transform: translateY(-5px); /* Move the text up slightly on hover */
}