پیشنمایش زنده
کد HTML
<button type="submit" class="google-btn">
<svg
viewBox="0 0 268.152 273.883"
overflow="hidden"
xml:space="preserve"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
class="icon"
>
<defs>
<linearGradient id="a">
<stop offset="0" stop-color="#0fbc5c"></stop>
<stop offset="1" stop-color="#0cba65"></stop>
</linearGradient>
<linearGradient id="g">
<stop offset=".231" stop-color="#0fbc5f"></stop>
<stop offset=".312" stop-color="#0fbc5f"></stop>
<stop offset=".366" stop-color="#0fbc5e"></stop>
<stop offset=".458" stop-color="#0fbc5d"></stop>
<stop offset=".54" stop-color="#12bc58"></stop>
<stop offset=".699" stop-color="#28bf3c"></stop>
<stop offset=".771" stop-color="#38c02b"></stop>
<stop offset=".861" stop-color="#52c218"></stop>
<stop offset=".915" stop-color="#67c30f"></stop>
<stop offset="1" stop-color="#86c504"></stop>
</linearGradient>
<linearGradient id="h">
<stop offset=".142" stop-color="#1abd4d"></stop>
<stop offset=".248" stop-color="#6ec30d"></stop>
<stop offset=".312" stop-color="#8ac502"></stop>
<stop offset=".366" stop-color="#a2c600"></stop>
<stop offset=".446" stop-color="#c8c903"></stop>
<stop offset=".54" stop-color="#ebcb03"></stop>
<stop offset=".616" stop-color="#f7cd07"></stop>
<stop offset=".699" stop-color="#fdcd04"></stop>
<stop offset=".771" stop-color="#fdce05"></stop>
<stop offset=".861" stop-color="#ffce0a"></stop>
</linearGradient>
<linearGradient id="f">
<stop offset=".316" stop-color="#ff4c3c"></stop>
<stop offset=".604" stop-color="#ff692c"></stop>
<stop offset=".727" stop-color="#ff7825"></stop>
<stop offset=".885" stop-color="#ff8d1b"></stop>
<stop offset="1" stop-color="#ff9f13"></stop>
</linearGradient>
<linearGradient id="b">
<stop offset=".231" stop-color="#ff4541"></stop>
<stop offset=".312" stop-color="#ff4540"></stop>
<stop offset=".458" stop-color="#ff4640"></stop>
<stop offset=".54" stop-color="#ff473f"></stop>
<stop offset=".699" stop-color="#ff5138"></stop>
<stop offset=".771" stop-color="#ff5b33"></stop>
<stop offset=".861" stop-color="#ff6c29"></stop>
<stop offset="1" stop-color="#ff8c18"></stop>
</linearGradient>
<linearGradient id="d">
<stop offset=".408" stop-color="#fb4e5a"></stop>
<stop offset="1" stop-color="#ff4540"></stop>
</linearGradient>
<linearGradient id="c">
<stop offset=".132" stop-color="#0cba65"></stop>
<stop offset=".21" stop-color="#0bb86d"></stop>
<stop offset=".297" stop-color="#09b479"></stop>
<stop offset=".396" stop-color="#08ad93"></stop>
<stop offset=".477" stop-color="#0aa6a9"></stop>
<stop offset=".568" stop-color="#0d9cc6"></stop>
<stop offset=".667" stop-color="#1893dd"></stop>
<stop offset=".769" stop-color="#258bf1"></stop>
<stop offset=".859" stop-color="#3086ff"></stop>
</linearGradient>
<linearGradient id="e">
<stop offset=".366" stop-color="#ff4e3a"></stop>
<stop offset=".458" stop-color="#ff8a1b"></stop>
<stop offset=".54" stop-color="#ffa312"></stop>
<stop offset=".616" stop-color="#ffb60c"></stop>
<stop offset=".771" stop-color="#ffcd0a"></stop>
<stop offset=".861" stop-color="#fecf0a"></stop>
<stop offset=".915" stop-color="#fecf08"></stop>
<stop offset="1" stop-color="#fdcd01"></stop>
</linearGradient>
<linearGradient
xlink:href="#a"
id="s"
x1="219.7"
y1="329.535"
x2="254.467"
y2="329.535"
gradientUnits="userSpaceOnUse"
></linearGradient>
<radialGradient
xlink:href="#b"
id="m"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(-1.93688 1.043 1.45573 2.55542 290.525 -400.634)"
cx="109.627"
cy="135.862"
fx="109.627"
fy="135.862"
r="71.46"
></radialGradient>
<radialGradient
xlink:href="#c"
id="n"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(-3.5126 -4.45809 -1.69255 1.26062 870.8 191.554)"
cx="45.259"
cy="279.274"
fx="45.259"
fy="279.274"
r="71.46"
></radialGradient>
<radialGradient
xlink:href="#d"
id="l"
cx="304.017"
cy="118.009"
fx="304.017"
fy="118.009"
r="47.854"
gradientTransform="matrix(2.06435 0 0 2.59204 -297.679 -151.747)"
gradientUnits="userSpaceOnUse"
></radialGradient>
<radialGradient
xlink:href="#e"
id="o"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(-.24858 2.08314 2.96249 .33417 -255.146 -331.164)"
cx="181.001"
cy="177.201"
fx="181.001"
fy="177.201"
r="71.46"
></radialGradient>
<radialGradient
xlink:href="#f"
id="p"
cx="207.673"
cy="108.097"
fx="207.673"
fy="108.097"
r="41.102"
gradientTransform="matrix(-1.2492 1.34326 -3.89684 -3.4257 880.501 194.905)"
gradientUnits="userSpaceOnUse"
></radialGradient>
<radialGradient
xlink:href="#g"
id="r"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(-1.93688 -1.043 1.45573 -2.55542 290.525 838.683)"
cx="109.627"
cy="135.862"
fx="109.627"
fy="135.862"
r="71.46"
></radialGradient>
<radialGradient
xlink:href="#h"
id="j"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(-.0814 -1.93722 2.92674 -.11625 -215.135 632.86)"
cx="154.87"
cy="145.969"
fx="154.87"
fy="145.969"
r="71.46"
></radialGradient>
<filter
id="q"
x="-.048"
y="-.058"
width="1.097"
height="1.116"
color-interpolation-filters="sRGB"
>
<feGaussianBlur stdDeviation="1.701"></feGaussianBlur>
</filter>
<filter
id="k"
x="-.017"
y="-.01"
width="1.033"
height="1.02"
color-interpolation-filters="sRGB"
>
<feGaussianBlur stdDeviation=".242"></feGaussianBlur>
</filter>
<clipPath clipPathUnits="userSpaceOnUse" id="i">
<path
d="M371.378 193.24H237.083v53.438h77.167c-1.241 7.563-4.026 15.003-8.105 21.786-4.674 7.773-10.451 13.69-16.373 18.196-17.74 13.498-38.42 16.258-52.783 16.258-36.283 0-67.283-23.286-79.285-54.928-.484-1.149-.805-2.335-1.197-3.507a81.1 81.1 0 0 1-4.101-25.448c0-9.226 1.569-18.057 4.43-26.398 11.285-32.897 42.985-57.467 80.179-57.467 7.481 0 14.685.884 21.517 2.648a77.7 77.7 0 0 1 33.425 18.25l40.834-39.712c-24.839-22.616-57.219-36.32-95.844-36.32-30.878 0-59.386 9.553-82.748 25.7-18.945 13.093-34.483 30.625-44.97 50.985-9.753 18.879-15.094 39.8-15.094 62.294 0 22.495 5.35 43.633 15.103 62.337v.126c10.302 19.857 25.368 36.954 43.678 49.988 15.997 11.386 44.68 26.551 84.031 26.551 22.63 0 42.687-4.051 60.375-11.644 12.76-5.478 24.065-12.622 34.301-21.804 13.525-12.132 24.117-27.139 31.347-44.404s11.097-36.79 11.097-57.957c0-9.858-.998-19.87-2.689-28.968"
></path>
</clipPath>
</defs>
<g
clip-path="url(#i)"
transform="matrix(.95792 0 0 .98525 -90.174 -78.856)"
>
<path
d="M92.076 219.959c.148 22.14 6.501 44.982 16.117 63.423v.127c6.949 13.392 16.445 23.97 27.26 34.452l65.327-23.67c-12.36-6.235-14.246-10.055-23.105-17.026-9.054-9.066-15.802-19.473-20.004-31.677h-.17l.17-.127c-2.765-8.058-3.037-16.613-3.14-25.503Z"
fill="url(#j)"
filter="url(#k)"
></path>
<path
d="M237.084 79.025c-6.457 22.526-3.989 44.421 0 57.161 7.456.006 14.638.888 21.449 2.647a77.66 77.66 0 0 1 33.424 18.25l41.88-40.726c-24.81-22.59-54.667-37.296-96.754-37.332"
fill="url(#l)"
filter="url(#k)"
></path>
<path
d="M236.943 78.847c-31.67 0-60.91 9.798-84.871 26.359a145.5 145.5 0 0 0-24.332 21.15c-1.904 17.744 14.257 39.551 46.262 39.37 15.528-17.936 38.495-29.542 64.056-29.542l.07.002-1.044-57.335z"
fill="url(#m)"
filter="url(#k)"
></path>
<path
d="m341.475 226.379-28.268 19.285c-1.24 7.562-4.028 15.002-8.107 21.786-4.674 7.772-10.45 13.69-16.373 18.196-17.702 13.47-38.328 16.244-52.687 16.255-14.842 25.102-17.444 37.675 1.043 57.934 22.877-.016 43.157-4.117 61.046-11.796 12.931-5.551 24.388-12.792 34.761-22.097 13.706-12.295 24.442-27.503 31.769-45s11.245-37.282 11.245-58.734Z"
fill="url(#n)"
filter="url(#k)"
></path>
<path
d="M234.996 191.21v57.498h136.006c1.196-7.874 5.152-18.064 5.152-26.5 0-9.858-.996-21.899-2.687-30.998Z"
fill="#3086ff"
filter="url(#k)"
></path>
<path
d="M128.39 124.327c-8.394 9.119-15.564 19.326-21.249 30.364-9.753 18.879-15.094 41.83-15.094 64.324 0 .317.026.627.029.944 4.32 8.224 59.666 6.649 62.456 0-.004-.31-.039-.613-.039-.924 0-9.226 1.57-16.026 4.43-24.367 3.53-10.289 9.056-19.763 16.123-27.926 1.602-2.031 5.875-6.397 7.121-9.016.475-.997-.862-1.557-.937-1.908-.083-.393-1.876-.077-2.277-.37-1.275-.929-3.8-1.414-5.334-1.845-3.277-.921-8.708-2.953-11.725-5.06-9.536-6.658-24.417-14.612-33.505-24.216"
fill="url(#o)"
filter="url(#k)"
></path>
<path
d="M162.099 155.857c22.112 13.301 28.471-6.714 43.173-12.977l-25.574-52.664a144.7 144.7 0 0 0-26.543 14.504c-12.316 8.512-23.192 18.9-32.176 30.72Z"
fill="url(#p)"
filter="url(#q)"
></path>
<path
d="M171.099 290.222c-29.683 10.641-34.33 11.023-37.062 29.29a145 145 0 0 0 16.792 13.984c15.996 11.386 46.766 26.551 86.118 26.551l.137-.004v-59.157l-.094.002c-14.736 0-26.512-3.843-38.585-10.527-2.977-1.648-8.378 2.777-11.123.799-3.786-2.729-12.9 2.35-16.183-.938"
fill="url(#r)"
filter="url(#k)"
></path>
<path
d="M219.7 299.023v59.996c5.506.64 11.236 1.028 17.247 1.028 6.026 0 11.855-.307 17.52-.872v-59.748a105 105 0 0 1-17.477 1.461c-5.932 0-11.7-.686-17.29-1.865"
opacity=".5"
fill="url(#s)"
filter="url(#k)"
></path>
</g>
</svg>
Continue with Google
</button>
کد CSS
.google-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
background-color: #16366e;
border: 1px solid #2254aa;
color: #7ba7ea;
padding: 0.625rem 1.5rem;
border-radius: 0.5rem;
font-weight: 500;
font-size: 0.875rem;
outline: none;
cursor: pointer;
transition: all 0.2s ease;
height: min-content;
width: fit-content;
user-select: none;
}
.google-btn:hover {
background-color: #193d7b;
border-color: #2a69d5;
transform: scale(1.05);
}
.google-btn:active {
background-color: #122f5d;
border-color: #2254aa;
transform: scale(0.95);
}
.icon {
width: 1.25rem;
height: 1.25rem;
flex-shrink: 0;
}