پیشنمایش زنده
کد HTML
<div class="button-container">
<button class="brutalist-button gemini">
<div class="gemini-logo">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="gemini-icon"
>
<path
fill="#5688fd"
d="M255,509.74387c0,-4.181-3.317,-28.439-5.002,-36.579C236.393,407.429,200.023,350.391,146,310.064
C109.903,283.118,65.342,265.064,21,259.419C2.049,257.007,2,256.997,2,255.656c0,-0.867,3.652,-1.618,11.85,-2.438
c38.338,-3.833,80.042,-18.019,112.65,-38.319c23.694,-14.751,48.995,-36.708,66.719,-57.901
C226.066,117.724,248.675,63.978,253.999,12.516c0.625,-6.041,1.393,-11.216,1.707,-11.5c0.314,-0.284,0.293,4.884,-0.047,11.484
c-1.321,25.677-10.726,59.973-24.194,88.221c-34.683,72.748-100.264,127.322-176.921,147.225
c-12.636,3.281-32.545,6.989-38.425,7.157L12.5,255.207l3.5,0.84c1.925,0.462,8.225,1.58,14,2.486
c73.44,11.519,140.669,55.521,183.292,119.968c23.169,35.032,40.183,83.112,42.569,120.298l0.687,10.702l0.668,-11
c1.702,-28.041,13.91,-69.245,28.789,-97.172c52.456,-101.263,125.876,-153.258,213.665,-166.444
c10.874,-1.633,13.495,-2.481,7.67,-2.481c-10.386,0-42.126,-7.28-60.524,-13.882c-38.019,-13.643-68.831,-32.968-98.143,-61.554
c-30.616,-30.612-56.843,-78.819-67.646,-133.72c-2.378,-12.085-4.54,-35.844-3.261,-35.844c0.285,0,1.058,5.063,1.716,11.25
c2.509,23.581,9.097,50.547,17.529,71.75c8.973,22.563,25.437,50.946,40.281,69.441c8.244,10.272,27.297,29.575,38.251,38.754
c40.38,33.835,91.66,55.563,143.75,60.908c8.747,0.898,12.25,1.629,12.25,2.558c0,1.559-1.286,1.835-15.5,3.318
c-78.493,8.19-154.6,56.62-197.252,125.522c-21.977,35.502-36.117,77.76-39.735,118.75c-0.502,5.692-1.06,7.75-2.099,7.75
C255.637,511,255,510.435,255,509.744z"
></path>
</svg>
</div>
<div class="button-text">
<span>Powered By</span>
<span>Gemini</span>
</div>
</button>
</div>
کد CSS
.button-container {
display: flex;
justify-content: center;
gap: 20px;
padding: 20px;
}
.brutalist-button {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 3px solid #ffffff;
border-radius: 12px;
padding: 0;
text-decoration: none;
color: #000000;
font-weight: bold;
position: relative;
box-shadow: 4px 4px 0px #e71c1c;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
height: 130px;
width: 130px;
cursor: pointer;
}
.brutalist-button.gemini {
background: linear-gradient(135deg, #5688fd, #a9daff, #ffffff);
background-size: 300% 300%;
animation: gradientShift 6s ease infinite;
}
@keyframes gradientShift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.brutalist-button::before {
content: "";
position: absolute;
left: 50%;
bottom: -150%;
width: 300%;
height: 300%;
border-radius: 50%;
transform: translateX(-50%) scale(0);
transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
z-index: 1;
}
.brutalist-button.gemini::before {
background: linear-gradient(135deg, #5688fd, #a9daff, #ffffff);
background-size: 300% 300%;
animation: gradientShift 6s ease infinite;
}
.brutalist-button:hover::before {
transform: translateX(-50%) scale(1);
}
.brutalist-button:hover {
transform: translate(-4px, -4px);
box-shadow: 8px 8px 0px #e71c1c;
}
.brutalist-button:active {
transform: translate(2px, 2px);
box-shadow: 2px 2px 0px #e71c1c;
}
/* Shared circular logo style */
.gemini-logo {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 90px;
height: 90px;
background: linear-gradient(135deg, #ffffff, #b6e0fd, #719bfd);
background-size: 300% 300%;
animation: gradientShift 6s ease infinite;
border-radius: 50%;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
@keyframes gradientShift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* Gemini icon style */
.gemini-icon {
width: 54px;
height: 54px;
fill: dodgerblue;
stroke: dodgerblue;
stroke-width: 16;
transition: all 0.6s ease-in-out;
}
/* Hover animations */
@keyframes spin {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
.brutalist-button:hover .gemini-logo {
animation: spin 5s linear infinite;
width: 50px;
height: 50px;
top: 28%;
}
.brutalist-button:hover .gemini-icon {
transform: scale(0.6);
}
/* Button text */
.button-text {
display: flex;
flex-direction: column;
align-items: center;
line-height: 1.3;
transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
text-align: center;
opacity: 0;
transform: translateY(20px);
z-index: 2;
position: absolute;
bottom: 18px;
left: 0;
right: 0;
}
.button-text span:first-child {
font-size: 13px;
font-weight: 500;
margin-bottom: 2px;
}
.button-text span:last-child {
font-size: 16px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.8px;
color: #ffffff;
}
.brutalist-button:hover .button-text {
opacity: 1;
transform: translateY(0);
}
@media (hover: hover) and (pointer: fine) {
.brutalist-button:hover {
transform: translate(-4px, -4px);
box-shadow: 8px 8px 0px #e71c1c;
}
}