Button
作者:AatreyuShau♥ 0 点赞MIT
实时预览
源代码
export default function Component() {
return (
<button className="button">
<svg
className="button-cosm"
xmlns:xlink="http://www.w3.org/1999/xlink"
fill="#000000"
width="128"
height="128"
viewBox="0 0 256 256"
id="Flat"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M243.07324,157.43945c-1.2334-1.47949-23.18847-27.34619-60.46972-41.05859-1.67579-17.97412-8.25293-34.36328-18.93653-46.87158C149.41309,52.8208,128.78027,44,104,44,54.51074,44,22.10059,88.57715,20.74512,90.4751a3.99987,3.99987,0,0,0,6.50781,4.65234C27.5625,94.6958,58.68359,52,104,52c22.36816,0,40.89648,7.85107,53.584,22.70508,8.915,10.437,14.65625,23.9541,16.65528,38.894A133.54185,133.54185,0,0,0,136,108c-25.10742,0-46.09473,6.48486-60.69434,18.75391-12.65234,10.63379-19.91015,25.39355-19.91015,40.49463a43.61545,43.61545,0,0,0,12.69336,31.21923C76.98438,207.3208,89.40234,212,104,212c23.98047,0,44.37305-9.4668,58.97461-27.37744,12.74512-15.6333,20.05566-37.145,20.05566-59.01953,0-.1128-.001-.22559-.001-.33838,33.62988,13.48486,53.62207,36.96631,53.89746,37.2959a4.00015,4.00015,0,0,0,6.14648-5.1211ZM104,204c-27.89746,0-40.60449-19.05078-40.60449-36.75146C63.39551,142.56592,86.11621,116,136,116a124.37834,124.37834,0,0,1,38.97266,6.32617q.05712,1.63038.05761,3.27686C175.03027,177.07129,139.29785,204,104,204Z"
></path>
</svg>
<svg
className="highlight"
viewBox="0 0 144.75738 77.18431"
preserveAspectRatio="none"
>
<g transform="translate(-171.52826,-126.11624)">
<g
fill="none"
stroke-width="17"
stroke-linecap="round"
stroke-miterlimit="10"
>
<path
d="M180.02826,169.45123c0,0 12.65228,-25.55115 24.2441,-25.66863c6.39271,-0.06479 -5.89143,46.12943 4.90937,50.63857c10.22345,4.2681 24.14292,-52.38336 37.86455,-59.80493c3.31715,-1.79413 -5.35094,45.88889 -0.78872,58.34589c5.19371,14.18125 33.36934,-58.38221 36.43049,-56.91633c4.67078,2.23667 -0.06338,44.42744 5.22574,47.53647c6.04041,3.55065 19.87185,-20.77286 19.87185,-20.77286"
></path>
</g>
</g>
</svg>
PRESS ME
</button>
<svg height="0" width="0">
<filter id="handDrawnNoise">
<feTurbulence
result="noise"
numOctaves="8"
baseFrequency="0.1"
type="fractalNoise"
></feTurbulence>
<feDisplacementMap
yChannelSelector="G"
xChannelSelector="R"
scale="3"
in2="noise"
in="SourceGraphic"
></feDisplacementMap>
</filter>
<filter id="handDrawnNoise2">
<feTurbulence
result="noise"
numOctaves="8"
baseFrequency="0.1"
seed="1010"
type="fractalNoise"
></feTurbulence>
<feDisplacementMap
yChannelSelector="G"
xChannelSelector="R"
scale="3"
in2="noise"
in="SourceGraphic"
></feDisplacementMap>
</filter>
<filter id="handDrawnNoiset">
<feTurbulence
result="noise"
numOctaves="8"
baseFrequency="0.1"
type="fractalNoise"
></feTurbulence>
<feDisplacementMap
yChannelSelector="G"
xChannelSelector="R"
scale="6"
in2="noise"
in="SourceGraphic"
></feDisplacementMap>
</filter>
<filter id="handDrawnNoiset2">
<feTurbulence
result="noise"
numOctaves="8"
baseFrequency="0.1"
seed="1010"
type="fractalNoise"
></feTurbulence>
<feDisplacementMap
yChannelSelector="G"
xChannelSelector="R"
scale="6"
in2="noise"
in="SourceGraphic"
></feDisplacementMap>
</filter>
</svg>
);
}