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

I ❤️ building dashboards for my customers

I ❤️ building dashboards for my customers

Said nobody, ever. Embeddable's dashboard toolkit is built to save dev time. It loads fast, looks native and doesn't suck like an embedded BI tool.

Get early access

Top comments (0)

Feature flag article image

Create a feature flag in your IDE in 5 minutes with LaunchDarkly’s MCP server 🏁

How to create, evaluate, and modify flags from within your IDE or AI client using natural language with LaunchDarkly's new MCP server. Follow along with this tutorial for step by step instructions.

Read full post

👋 Kindness is contagious

Explore this insightful write-up embraced by the inclusive DEV Community. Tech enthusiasts of all skill levels can contribute insights and expand our shared knowledge.

Spreading a simple "thank you" uplifts creators—let them know your thoughts in the discussion below!

At DEV, collaborative learning fuels growth and forges stronger connections. If this piece resonated with you, a brief note of thanks goes a long way.

Okay