DEV Community

Freecodez
Freecodez

Posted on

2 1 1 1 1

Unique Ironman button using html css

Hey there, You are most welcome to this article. I hope you will enjoy this article. If you like this article then please share this article with your friends and colleagues. If you have any questions or suggestions regarding this article then please comment down below.

Unique Ironman button using html css

Unique Ironman button using html css

For full source code visit : https://freecodez.com/post/61bveb3

<!-- https://freecodez.com -->
<label class="switch">
  <input class="input" type="checkbox">
  <span class="slider">
    <span class="iron-man"><svg xmlns="http://www.w3.org/2000/svg" width="50" viewBox="0 0 48 48" height="50"><path fill="#d03827" d="m19.479 46.479c-.595.059-1.166-.238-1.441-.77-.415-.803-1.062-1.334-1.595-2.023-1.281-1.657-2.266-3.435-3.411-5.189-.196-.3-.395-.608-.481-.955-.089-.359-.053-.736-.02-1.104.058-.64-.058-1.274-.217-1.897-.384-1.51-2.376-2.642-3.273-3.916-1.248-1.774-1.382-4.075-1.473-6.242-.07-1.661.002-3.513-.032-5.223-.008-.422.162-.816.472-1.103.859-.794 1.844-2.056 2.009-3.191.332-2.29.469-4.653 1.376-6.782 1.679-3.937 5.84-6.913 10.083-7.475 5.19-.687 10.929 1.721 14.485 5.564.586.633 1.124 1.315 1.544 2.069.75 1.344 1.104 2.871 1.337 4.392.201 1.309.03 2.697.055 4.029.009.458.371.863.743 1.131.483.348.784.975.878 1.581.125.809-.061 1.629-.201 2.436-.25 1.443-.352 2.912-.303 4.377.05 1.499.199 3.184-.791 4.312-.511.582-1.458.982-1.927 1.599-1.072 1.409-.446 3.435-.987 5.121-.22.687-.665 1.276-1.102 1.85-1.579 2.075-2.924 4.202-4.503 6.277-.359.472-.878 1.082-1.471 1.066-3.125-.156-6.582-.247-9.754.066z"></path><path fill="#010101" d="m19.328 46.987c-.731 0-1.398-.396-1.734-1.048-.239-.464-.577-.837-.934-1.232-.209-.23-.418-.463-.612-.715-.888-1.147-1.645-2.367-2.377-3.547-.346-.558-.693-1.117-1.058-1.675-.206-.316-.439-.675-.548-1.107-.107-.436-.068-.869-.034-1.252.057-.622-.07-1.23-.201-1.747-.201-.789-.998-1.528-1.77-2.243-.519-.48-1.054-.978-1.428-1.508-1.373-1.95-1.479-4.478-1.564-6.509-.04-.965-.033-2.004-.026-3.009.005-.751.01-1.501-.005-2.226-.012-.558.219-1.098.632-1.479.765-.706 1.708-1.888 1.854-2.896.067-.463.127-.929.186-1.396.234-1.844.476-3.75 1.226-5.51 1.727-4.05 5.938-7.174 10.478-7.775 5.132-.677 11.124 1.619 14.918 5.72.688.743 1.216 1.451 1.613 2.165.851 1.523 1.192 3.237 1.396 4.56.138.902.109 1.829.081 2.726-.015.46-.029.918-.021 1.369.004.218.21.5.536.736.552.398.956 1.112 1.079 1.91.123.789-.015 1.556-.148 2.297l-.054.3c-.243 1.408-.343 2.847-.295 4.275l.013.345c.055 1.463.118 3.122-.928 4.313-.28.319-.648.574-1.004.821-.36.25-.7.486-.9.75-.541.71-.575 1.665-.612 2.676-.027.759-.057 1.544-.297 2.295-.25.776-.744 1.427-1.18 2-.785 1.031-1.526 2.097-2.244 3.127-.72 1.035-1.465 2.106-2.259 3.15-.477.626-1.066 1.263-1.842 1.263-.014 0-.028 0-.042 0-2.81-.14-6.438-.256-9.694.066-.068.006-.134.01-.201.01zm.151-.508h.01zm3.775-45.485c-.579 0-1.15.037-1.711.111-4.137.547-8.12 3.498-9.688 7.176-.695 1.631-.928 3.468-1.153 5.243-.06.473-.12.944-.188 1.413-.185 1.267-1.239 2.632-2.166 3.487-.206.19-.316.448-.311.725.014.734.01 1.493.005 2.252-.007.993-.014 2.021.026 2.962.079 1.899.179 4.264 1.383 5.974.313.445.787.885 1.29 1.351.877.813 1.784 1.655 2.058 2.73.152.598.298 1.311.23 2.064-.032.353-.061.668.007.939.067.269.244.54.415.803.368.563.72 1.129 1.069 1.693.752 1.211 1.463 2.355 2.318 3.463.179.231.372.444.563.656.384.425.781.864 1.08 1.443.178.344.547.552.948.501 3.302-.325 6.824-.218 9.831-.069h.01c.378 0 .874-.653 1.038-.869.781-1.027 1.521-2.089 2.235-3.116.723-1.039 1.471-2.113 2.269-3.161.406-.534.826-1.087 1.023-1.7.198-.619.224-1.303.25-2.026.041-1.122.083-2.282.815-3.244.296-.39.718-.683 1.126-.966.32-.223.623-.433.822-.66.783-.892.73-2.276.68-3.616l-.013-.349c-.05-1.497.055-3.004.311-4.479l.054-.308c.125-.689.242-1.342.145-1.966-.082-.531-.341-1.011-.676-1.253-.35-.253-.937-.786-.951-1.527-.009-.469.006-.943.021-1.42.027-.851.055-1.731-.069-2.543-.19-1.239-.508-2.84-1.28-4.224-.358-.644-.841-1.289-1.475-1.973-3.166-3.421-7.946-5.517-12.341-5.517z"></path><path fill="#febf10" d="m38.104 25.557c-1.123-4.605-1.65-9.529-1.541-14.268-1.207-1.917-2.861-3.551-4.866-4.604-.818-.43-1.954-.717-2.562-.021-.271.31-.351.738-.425 1.143-.326 1.761-.748 3.504-1.265 5.219-.234.776-.545 1.618-1.256 2.006-.435.237-.95.261-1.445.28-.754.029-1.509.057-2.263.086-.168.006-.348.009-.488-.084-.156-.104-.219-.299-.272-.479-.802-2.73-1.692-5.435-2.667-8.108-.086-.237-.215-.509-.464-.549-.148-.024-.294.046-.427.115-2.115 1.1-4.093 2.729-5.751 4.442.34 4.626-.564 9.83-2.475 14.057.237.218.46.466.687.707 3.687 5.347 5.26 11.33 7.888 17.277.163.369.428.763.828.711 3.361-.115 6.812-.309 10.173-.424 2.076-4.558 4.648-9.484 6.647-14.077l-.004-.001c.771-1.072 1.426-2.227 1.948-3.428z"></path><path fill="#16b7b8" d="m13.826 23.27c-.366 1.118-.367 2.353-.002 3.471 1.598.602 3.318.88 5.024.813.38-.015.775-.051 1.105-.241.465-.267.825-1.07.994-1.578"></path><path fill="#16b7b8" d="m27.207 25.601c.225.589.613.676.968 1.198.078.114.161.229.278.303.104.066.227.095.347.12 1.607.34 3.291.314 4.887-.075.245-.06.51-.143.648-.355.083-.128.107-.285.127-.437.171-1.292-.037-2.164-.038-3.467"></path><path fill="#010101" d="m38.589 25.438c-1.106-4.538-1.634-9.428-1.526-14.138.002-.099-.024-.195-.077-.278-1.308-2.077-3.057-3.729-5.057-4.779-1.323-.695-2.511-.662-3.171.093-.361.414-.461.95-.54 1.381-.32 1.732-.741 3.471-1.252 5.166-.201.669-.463 1.409-1.017 1.71-.343.187-.812.204-1.304.223l-2.183.083c-.051.002-.17.006-.182.01-.028-.033-.067-.165-.082-.214-.801-2.728-1.701-5.466-2.677-8.137-.069-.193-.282-.781-.852-.873-.324-.054-.594.089-.738.165-1.961 1.02-3.994 2.588-5.88 4.537-.099.103-.149.242-.14.385.334 4.544-.575 9.708-2.432 13.813-.086.196-.039.428.121.574.219.201.425.433.635.656 2.488 3.617 3.983 7.485 5.561 11.578.705 1.827 1.434 3.717 2.259 5.584.377.856.89 1.016 1.192 1.016.041 0 .077-.003.109-.007 1.684-.058 3.389-.135 5.095-.213 1.7-.077 3.4-.154 5.078-.211.19-.007.359-.12.438-.293.9-1.977 1.915-4.065 2.896-6.085 1.281-2.637 2.604-5.363 3.734-7.955.763-1.069 1.427-2.234 1.964-3.472.044-.102.054-.213.028-.319zm-20.194-18.702c.022-.012.084-.044.079-.069.02.025.058.088.109.232.969 2.652 1.862 5.37 2.657 8.076.06.203.159.544.476.755.277.185.592.171.784.168l2.262-.086c.498-.019 1.117-.042 1.666-.341.845-.46 1.218-1.378 1.495-2.301.521-1.73.951-3.504 1.277-5.272.064-.343.13-.697.312-.904.392-.452 1.296-.209 1.952.134 1.531.804 2.889 2.013 4.006 3.497-.748.863-1.13 1.896-1.198 3.33-.034.689-.099 1.419-.165 2.166-.188 2.116-.382 4.306.029 6.246.031.147.056.299.032.396-.039.104-.306.257-.831.469-6.237 2.525-13.53 2.362-19.149-.398 1.635-4.348.39-8.57-.941-12.214 1.674-1.653 3.441-2.996 5.148-3.884zm15.585 17.484c.05.7.09 1.3-.02 2.07 0 .06-.02.19-.04.23-.02.03-.1.08-.35.14-1.52.37-3.14.4-4.67.07-.05-.01-.15-.03-.18-.05-.04-.02-.1-.12-.13-.16-.18-.27-.37-.44-.52-.58-.084-.075-.15-.139-.211-.207 2.008-.295 3.995-.822 5.891-1.589.067-.027.145-.062.219-.094.004.055.008.116.011.17zm-19.802-.295c1.934.894 4.041 1.501 6.23 1.819-.205.55-.482 1.008-.704 1.135-.241.139-.578.163-.875.175-1.544.068-3.133-.18-4.598-.697-.217-.791-.227-1.63-.053-2.432zm2.551 13.108c-.654-1.697-1.297-3.354-1.999-4.976.132.177.254.359.401.526.34.39.724.749 1.094 1.097.822.772 1.599 1.501 1.855 2.469l.049.188c.171.662.396 1.511.954 2.056 0 .013-.006.025-.006.038.048.963-.065 1.921-.337 2.848l-.038.128c-.03.099-.06.206-.089.313-.668-1.569-1.29-3.149-1.884-4.687zm7.676 5.74c-1.609.074-3.222.145-4.853.204-.003-.05-.006-.1-.024-.148-.116-.306.005-.708.132-1.135l.039-.133c.258-.877.379-1.779.38-2.689 1.283.275 2.588.388 3.872.388 1.422 0 2.809-.128 4.11-.288.002.044.002.087.016.131.361 1.139.661 2.308.91 3.478-1.516.055-3.048.123-4.582.192zm7.56-6.027c-.747 1.539-1.502 3.108-2.225 4.649-.21-.873-.44-1.743-.71-2.596l-.046-.103c-.008-.013-.02-.021-.029-.033.031-.049.073-.09.086-.149.135-.608.352-1.072.582-1.563.173-.37.353-.752.515-1.225.131-.38.267-.746.486-1.032.266-.348.669-.598 1.098-.863l.171-.106c.858-.538 1.666-1.181 2.426-1.896-.765 1.638-1.565 3.293-2.354 4.917zm-.603-3.868-.167.104c-.485.301-.988.612-1.364 1.105-.311.404-.485.871-.638 1.314-.146.422-.313.779-.475 1.126-.203.432-.411.876-.566 1.427-2.56.324-5.5.535-8.176-.115-.478-.201-.71-1.098-.879-1.753l-.051-.193c-.33-1.244-1.249-2.107-2.138-2.941-.369-.347-.718-.674-1.026-1.026-.488-.559-.879-1.19-1.292-1.86-.126-.205-.253-.41-.382-.613-.901-1.41-1.971-2.962-3.188-4.264-.013-.019-.024-.038-.037-.057-.039-.055-.087-.1-.141-.134-.103-.106-.199-.225-.305-.327 1.537-3.535 2.401-7.778 2.435-11.769.982 3.109 1.563 6.542.119 9.977-.091.216-.012.457.172.591-.292 1.122-.276 2.323.084 3.426.047.145.157.259.3.313 1.492.563 3.112.855 4.714.855.169 0 .338-.004.507-.01.446-.019.917-.068 1.333-.308.673-.386 1.077-1.426 1.22-1.854.002-.006 0-.012.002-.017.867.09 1.743.139 2.624.139.909 0 1.822-.053 2.733-.148.169.391.405.618.609.804.13.12.26.24.37.41.1.15.23.32.43.45.17.1.35.15.51.18.78.17 1.58.25 2.38.25.92 0 1.84-.11 2.72-.33.23-.05.69-.17.95-.57.15-.23.19-.48.21-.64.11-.87.07-1.55.02-2.27-.015-.238-.029-.499-.038-.761.087-.113.16-.237.196-.383.073-.296.032-.58-.023-.845-.381-1.795-.193-3.908-.012-5.952.067-.761.134-1.504.167-2.205.053-1.076.31-1.864.79-2.514-.088 4.675.436 9.513 1.519 14.02-1.383 3.108-3.586 5.72-6.216 7.368z"></path></svg></span>
    <span class="commutator"><svg fill="#303c42" height="55" stroke="#303c42" stroke-width="1.444" viewBox="0 0 76 76" width="55" xmlns="http://www.w3.org/2000/svg"><g fill="#2196F3" stroke-linejoin="round"><path d="m38 29c4.9706 0 9 4.0294 9 9s-4.0294 9-9 9-9-4.0294-9-9 4.0294-9 9-9zm0-10c1.8461 0 3.6307.2633 5.3183.7544l-2.321 4.5672c-.9657-.2106-1.9685-.3216-2.9973-.3216-.7922 0-1.569.0658-2.3252.1922l-2.0953-4.6753c1.4185-.338 2.8986-.5169 4.4205-.5169zm0 38c-1.8461 0-3.6307-.2633-5.3184-.7544l2.3211-4.5672c.9656.2106 1.9685.3216 2.9973.3216.7921 0 1.5689-.0658 2.3252-.1922l2.0952 4.6753c-1.4184.338-2.8985.5169-4.4204.5169zm7.288-36.552c3.0672 1.275 5.7284 3.3306 7.7355 5.9189l-4.5613 2.3301c-1.1837-1.3302-2.6173-2.4332-4.2272-3.2353zm8.9232 7.6374c1.6744 2.7319 2.6776 5.9196 2.7801 9.3337l-5.0581-.7957c-.1783-1.8263-.7075-3.5498-1.5193-5.1021zm-1.7744 22.2674c-2.1253 2.4815-4.8792 4.4086-8.0149 5.5345l-.8067-5.0589c1.6508-.7236 3.1353-1.7566 4.38-3.0255zm4.5042-10.8449c-.2661 3.3899-1.4219 6.5297-3.2341 9.1861l-3.6247-3.617c.8892-1.5149 1.5017-3.2119 1.768-5.0215zm-26.229 16.0441c-3.0673-1.275-5.7284-3.3306-7.7355-5.9189l4.5612-2.3301c1.1837 1.3303 2.6174 2.4333 4.2272 3.2354zm-8.9232-7.6374c-1.6744-2.7319-2.6776-5.9196-2.7801-9.3337l5.0581.7957c.1782 1.8263.7074 3.5498 1.5192 5.1021zm-2.7298-11.4225c.2661-3.3898 1.4219-6.5297 3.2341-9.1861l3.6247 3.6171c-.8893 1.5149-1.5017 3.2118-1.768 5.0214zm4.5042-10.8449c2.1252-2.4814 4.8791-4.4085 8.0149-5.5345l.8067 5.0589c-1.6509.7236-3.1353 1.7566-4.38 3.0255z" stroke="#ccc" stroke-linecap="round" stroke-width="2.432"></path><path d="m38 29c4.9706 0 9 4.0294 9 9s-4.0294 9-9 9-9-4.0294-9-9 4.0294-9 9-9zm0-10c1.8461 0 3.6307.2633 5.3183.7544l-2.321 4.5672c-.9657-.2106-1.9685-.3216-2.9973-.3216-.7922 0-1.569.0658-2.3252.1922l-2.0953-4.6753c1.4185-.338 2.8986-.5169 4.4205-.5169zm0 38c-1.8461 0-3.6307-.2633-5.3184-.7544l2.3211-4.5672c.9656.2106 1.9685.3216 2.9973.3216.7921 0 1.5689-.0658 2.3252-.1922l2.0952 4.6753c-1.4184.338-2.8985.5169-4.4204.5169zm7.288-36.552c3.0672 1.275 5.7284 3.3306 7.7355 5.9189l-4.5613 2.3301c-1.1837-1.3302-2.6173-2.4332-4.2272-3.2353zm8.9232 7.6374c1.6744 2.7319 2.6776 5.9196 2.7801 9.3337l-5.0581-.7957c-.1783-1.8263-.7075-3.5498-1.5193-5.1021zm-1.7744 22.2674c-2.1253 2.4815-4.8792 4.4086-8.0149 5.5345l-.8067-5.0589c1.6508-.7236 3.1353-1.7566 4.38-3.0255zm4.5042-10.8449c-.2661 3.3899-1.4219 6.5297-3.2341 9.1861l-3.6247-3.617c.8892-1.5149 1.5017-3.2119 1.768-5.0215zm-26.229 16.0441c-3.0673-1.275-5.7284-3.3306-7.7355-5.9189l4.5612-2.3301c1.1837 1.3303 2.6174 2.4333 4.2272 3.2354zm-8.9232-7.6374c-1.6744-2.7319-2.6776-5.9196-2.7801-9.3337l5.0581.7957c.1782 1.8263.7074 3.5498 1.5192 5.1021zm-2.7298-11.4225c.2661-3.3898 1.4219-6.5297 3.2341-9.1861l3.6247 3.6171c-.8893 1.5149-1.5017 3.2118-1.768 5.0214zm4.5042-10.8449c2.1252-2.4814 4.8791-4.4085 8.0149-5.5345l.8067 5.0589c-1.6509.7236-3.1353 1.7566-4.38 3.0255z"></path></g></svg></span>
  </span>
</label>
Enter fullscreen mode Exit fullscreen mode

Source Code : https://freecodez.com/post/61bveb3

For more such articles visit : https://freecodez.com

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →