پیشنمایش زنده
کد HTML
<div class="button-container">
<button class="brutalist-button openai">
<div class="openai-logo">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 50 50"
class="openai-icon"
>
<path
d="M37.3594 19.7622C38.118 26.2177 34.1961 32.3076 28.0148 34.2725C21.8334 36.2375 15.1355 33.5235 12.0555 27.806C6.80378 28.0224 2.03485 24.9074 0.151875 20.1153C-0.0355183 19.6372 0.0167211 19.0978 0.292395 18.6644C0.568066 18.231 1.03386 17.9559 1.54536 17.9244L8.5501 17.4903L6.81109 11.9573C6.35173 10.4955 6.65383 8.89954 7.61558 7.707C8.57733 6.51449 10.0707 5.88421 11.5925 6.02852C15.3979 6.39217 17.925 6.37745 19.1737 5.98439C20.4225 5.59133 22.4657 4.17143 25.3034 1.72466C26.4651 0.724618 28.0496 0.376265 29.5208 0.797451C30.9921 1.21864 32.1533 2.35301 32.6116 3.81682L34.3329 9.30024L40.2256 5.67766C40.6627 5.40863 41.2016 5.36564 41.6752 5.56204C42.1488 5.75845 42.4998 6.17048 42.6192 6.67031C43.8037 11.6426 41.7173 16.8998 37.3594 19.7622ZM19.4363 37.6572L16.2393 36.1255C15.1209 35.6134 13.7988 36.0968 13.2706 37.2111C12.7423 38.3254 13.2036 39.6578 14.3064 40.203L17.5052 41.7338C18.6236 42.246 19.9458 41.7625 20.4741 40.6482C21.0023 39.5338 20.541 38.2014 19.4381 37.6563L19.4363 37.6572ZM41.7546 28.1652C41.2358 27.8701 40.6211 27.7943 40.0462 27.9545C39.4713 28.1148 38.9834 28.4979 38.6903 29.0192L36.9463 32.1119C36.3752 33.1914 36.7639 34.5298 37.8232 35.1319C38.8825 35.7339 40.2281 35.3811 40.8592 34.3358L42.6018 31.2427C43.2154 30.1574 42.8361 28.7797 41.7545 28.1651L41.7546 28.1652Z"
fill="#58CC02"
></path>
</svg>
</div>
<div class="button-text">
<span>Powered By</span>
<span>Duolingo </span>
</div>
</button>
</div>
کد CSS
.button-container {
display: flex;
justify-content: center;
gap: 20px; /* Adjust this value to increase or decrease space between buttons */
padding: 20px;
}
.brutalist-button {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 3px solid #000000;
border-radius: 12px;
padding: 0;
text-decoration: none;
color: #000000;
font-weight: bold;
position: relative;
box-shadow: 4px 4px 0px #000000;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
height: 130px;
width: 130px;
cursor: pointer;
}
.brutalist-button.openai {
background-color: #057702;
}
.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.openai::before {
background-color: #316b58;
}
.brutalist-button.claude::before {
background-color: #e3d19c;
}
.brutalist-button:hover::before {
transform: translateX(-50%) scale(1);
}
.brutalist-button:hover {
transform: translate(-4px, -4px);
box-shadow: 8px 8px 0px #000000;
}
.brutalist-button:active {
transform: translate(2px, 2px);
box-shadow: 2px 2px 0px #000000;
}
.openai-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;
border-radius: 50%;
transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.openai-logo {
align-items: center;
justify-content: center;
background-color: #0f1715; /* OpenAI's green color */
border-radius: 50%; /* This creates the circular background */
}
.openai-icon {
width: 54px;
height: 54px;
fill: #ffffff; /* White color for the SVG */
transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
@keyframes spin {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
.brutalist-button:hover .openai-logo {
animation: spin 5s linear infinite;
width: 50px;
height: 50px;
top: 28%;
}
.brutalist-button:hover .openai-icon {
transform: scale(0.6);
}
.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);
}
.brutalist-button.openai:hover .button-text {
color: #d3d3d3;
}
.brutalist-button.openai:hover .button-text span:last-child {
color: #d6cbbf;
}
@media (hover: hover) and (pointer: fine) {
.brutalist-button:hover {
transform: translate(-4px, -4px);
box-shadow: 8px 8px 0px #000000;
}
}