Buttons | simontheonlyone loud husky 46

Buttonsloud husky1 个文件更新于 2026-04-06
html公开前 25 行，完整代码需登录
<button>
  <span class="night">Night</span>
  <span class="day">Day</span>
    <svg class="lightning" style="color: rgb(255, 228, 56);" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
      <path d="M5.52.359A.5.5 0 0 1 6 0h4a.5.5 0 0 1 .474.658L8.694 6H12.5a.5.5 0 0 1 .395.807l-7 9a.5.5 0 0 1-.873-.454L6.823 9.5H3.5a.5.5 0 0 1-.48-.641l2.5-8.5z" fill="#ffe438"></path> 
    </svg>
    <svg class="mini-cloud" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> 
      <path d="M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773 16 11.569 14.502 13 12.687 13H3.781C1.708 13 0 11.366 0 9.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383z"></path>
    </svg>
    <svg class="stars star1" id="IconChangeColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" height="20" width="20">
      <path d="M208,512,155.62,372.38,16,320l139.62-52.38L208,128l52.38,139.62L400,320,260.38,372.38Z" id="mainIconPathAttribute" fill="yellow"></path>
      <path d="M88,176,64.43,111.57,0,88,64.43,64.43,88,0l23.57,64.43L176,88l-64.43,23.57Z" id="mainIconPathAttribute" fill="yellow"></path>
      <path d="M400,256l-31.11-80.89L288,144l80.89-31.11L400,32l31.11,80.89L512,144l-80.89,31.11Z" id="mainIconPathAttribute" fill="yellow"></path>
    </svg>
    <svg class="stars star2" id="IconChangeColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" height="20" width="20">
      <path d="M208,512,155.62,372.38,16,320l139.62-52.38L208,128l52.38,139.62L400,320,260.38,372.38Z" id="mainIconPathAttribute" fill="yellow"></path>
      <path d="M88,176,64.43,111.57,0,88,64.43,64.43,88,0l23.57,64.43L176,88l-64.43,23.57Z" id="mainIconPathAttribute" fill="yellow"></path>
      <path d="M400,256l-31.11-80.89L288,144l80.89-31.11L400,32l31.11,80.89L512,144l-80.89,31.11Z" id="mainIconPathAttribute" fill="yellow"></path>
    </svg>
  <span class="cloud left-side"></span>
  <span class="cloud left-side1"></span>
  <span class="cloud middle-side"></span>
  <span class="cloud middle-side1"></span>
  <span class="cloud right-side"></span>
  <span class="cloud right-side1"></span>

登录后可以查看完整源码、在线编辑并实时预览运行效果。