The latest articles on DEV Community by butterfly css blog (@butterflycss). https://dev.to/butterflycss https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3231977%2F2921f5c4-d969-421f-80f3-5d93f9fc6e41.jpg https://dev.to/butterflycss en butterfly css blog Wed, 22 Apr 2026 23:42:38 +0000 https://dev.to/butterflycss/-4ofk https://dev.to/butterflycss/-4ofk <div class="ltag__link--embedded"> <div class="crayons-story "> <a href="https://dev.to/amrz-labs/earth-pro-have-a-happier-earth-with-the-best-prices-1hem" class="crayons-story__hidden-navigation-link">(Earth pro )have a happier earth with the best prices</a> <div class="crayons-story__body crayons-story__body-full_post"> <a href="https://dev.to/amrz-labs/earth-pro-have-a-happier-earth-with-the-best-prices-1hem" class="crayons-article__context-note crayons-article__context-note__feed"><p>DEV Weekend Challenge: Earth Day</p> </a> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a class="crayons-logo crayons-logo--l" href="/amrz-labs"> <img alt="amrz-labs logo" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Forganization%2Fprofile_image%2F12983%2F47b5c8df-efe2-4e9c-89f3-d341686ab2f1.png" class="crayons-logo__image" width="800" height="800"> </a> <a href="/butterflycss" class="crayons-avatar crayons-avatar--s absolute -right-2 -bottom-2 border-solid border-2 border-base-inverted "> <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3231977%2F2921f5c4-d969-421f-80f3-5d93f9fc6e41.jpg" alt="butterflycss profile" class="crayons-avatar__image" width="512" height="512"> </a> </div> <div> <div> <a href="/butterflycss" class="crayons-story__secondary fw-medium m:hidden"> butterfly css blog </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> butterfly css blog <div id="story-author-preview-content-3521011" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/butterflycss" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3231977%2F2921f5c4-d969-421f-80f3-5d93f9fc6e41.jpg" class="crayons-avatar__image" alt="" width="512" height="512"> </span> <span class="crayons-link crayons-subtitle-2 mt-5">butterfly css blog</span> </a> </div> <div class="print-hidden"> Follow </div> <div class="author-preview-metadata-container"></div> </div> </div> </div> <span> <span class="crayons-story__tertiary fw-normal"> for </span><a href="/amrz-labs" class="crayons-story__secondary fw-medium">amrz-labs</a> </span> </div> <a href="https://dev.to/amrz-labs/earth-pro-have-a-happier-earth-with-the-best-prices-1hem" class="crayons-story__tertiary fs-xs"><time>Apr 19</time><span class="time-ago-indicator-initial-placeholder"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title crayons-story__title-full_post"> <a href="https://dev.to/amrz-labs/earth-pro-have-a-happier-earth-with-the-best-prices-1hem" id="article-link-3521011"> (Earth pro )have a happier earth with the best prices </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " href="/t/devchallenge"><span class="crayons-tag__prefix">#</span>devchallenge</a> <a class="crayons-tag crayons-tag--monochrome " href="/t/weekendchallenge"><span class="crayons-tag__prefix">#</span>weekendchallenge</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/amrz-labs/earth-pro-have-a-happier-earth-with-the-best-prices-1hem" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="24" height="24"> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="24" height="24"> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="24" height="24"> </span> </span> <span class="aggregate_reactions_counter">9<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="https://dev.to/amrz-labs/earth-pro-have-a-happier-earth-with-the-best-prices-1hem#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center"> Comments 2<span class="hidden s:inline"> comments</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 12 min read </small> <span class="bm-initial"> </span> <span class="bm-success"> </span> </div> </div> </div> </div> </div> </div> butterfly css blog Wed, 22 Apr 2026 23:14:14 +0000 https://dev.to/butterflycss/-1foo https://dev.to/butterflycss/-1foo <div class="ltag__link--embedded"> <div class="crayons-story "> <a href="https://dev.to/butterflycss/how-to-make-moving-ball-animation-in-css-3i4a" class="crayons-story__hidden-navigation-link">make physics-driven moving balls without leaving your html</a> <div class="crayons-story__body crayons-story__body-full_post"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/butterflycss" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3231977%2F2921f5c4-d969-421f-80f3-5d93f9fc6e41.jpg" alt="butterflycss profile" class="crayons-avatar__image" width="512" height="512"> </a> </div> <div> <div> <a href="/butterflycss" class="crayons-story__secondary fw-medium m:hidden"> butterfly css blog </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> butterfly css blog <div id="story-author-preview-content-2756503" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/butterflycss" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3231977%2F2921f5c4-d969-421f-80f3-5d93f9fc6e41.jpg" class="crayons-avatar__image" alt="" width="512" height="512"> </span> <span class="crayons-link crayons-subtitle-2 mt-5">butterfly css blog</span> </a> </div> <div class="print-hidden"> Follow </div> <div class="author-preview-metadata-container"></div> </div> </div> </div> </div> <a href="https://dev.to/butterflycss/how-to-make-moving-ball-animation-in-css-3i4a" class="crayons-story__tertiary fs-xs"><time>Aug 6 '25</time><span class="time-ago-indicator-initial-placeholder"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title crayons-story__title-full_post"> <a href="https://dev.to/butterflycss/how-to-make-moving-ball-animation-in-css-3i4a" id="article-link-2756503"> make physics-driven moving balls without leaving your html </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " href="/t/beginners"><span class="crayons-tag__prefix">#</span>beginners</a> <a class="crayons-tag crayons-tag--monochrome " href="/t/animation"><span class="crayons-tag__prefix">#</span>animation</a> <a class="crayons-tag crayons-tag--monochrome " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/butterflycss/how-to-make-moving-ball-animation-in-css-3i4a" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="24" height="24"> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="24" height="24"> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="24" height="24"> </span> </span> <span class="aggregate_reactions_counter">4<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="https://dev.to/butterflycss/how-to-make-moving-ball-animation-in-css-3i4a#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center"> Comments 1<span class="hidden s:inline"> comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 1 min read </small> <span class="bm-initial"> </span> <span class="bm-success"> </span> </div> </div> </div> </div> </div> </div> butterfly css blog Wed, 22 Apr 2026 16:05:55 +0000 https://dev.to/butterflycss/-1lic https://dev.to/butterflycss/-1lic <div class="ltag__link--embedded"> <div class="crayons-story "> <a href="https://dev.to/butterflycss/butterfly-css-the-2026-game-changer-a-full-review-22o5" class="crayons-story__hidden-navigation-link">🦋 Butterfly CSS: The 2026 Game Changer? A Full Review 🚀</a> <div class="crayons-story__body crayons-story__body-full_post"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/butterflycss" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3231977%2F2921f5c4-d969-421f-80f3-5d93f9fc6e41.jpg" alt="butterflycss profile" class="crayons-avatar__image" width="512" height="512"> </a> </div> <div> <div> <a href="/butterflycss" class="crayons-story__secondary fw-medium m:hidden"> butterfly css blog </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> butterfly css blog <div id="story-author-preview-content-3462400" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/butterflycss" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3231977%2F2921f5c4-d969-421f-80f3-5d93f9fc6e41.jpg" class="crayons-avatar__image" alt="" width="512" height="512"> </span> <span class="crayons-link crayons-subtitle-2 mt-5">butterfly css blog</span> </a> </div> <div class="print-hidden"> Follow </div> <div class="author-preview-metadata-container"></div> </div> </div> </div> </div> <a href="https://dev.to/butterflycss/butterfly-css-the-2026-game-changer-a-full-review-22o5" class="crayons-story__tertiary fs-xs"><time>Apr 6</time><span class="time-ago-indicator-initial-placeholder"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title crayons-story__title-full_post"> <a href="https://dev.to/butterflycss/butterfly-css-the-2026-game-changer-a-full-review-22o5" id="article-link-3462400"> 🦋 Butterfly CSS: The 2026 Game Changer? A Full Review 🚀 </a> </h2> <div class="crayons-story__tags"> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/butterflycss/butterfly-css-the-2026-game-changer-a-full-review-22o5" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="24" height="24"> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="24" height="24"> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="24" height="24"> </span> </span> <span class="aggregate_reactions_counter">8<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="https://dev.to/butterflycss/butterfly-css-the-2026-game-changer-a-full-review-22o5#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center"> Comments 1<span class="hidden s:inline"> comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> <span class="bm-initial"> </span> <span class="bm-success"> </span> </div> </div> </div> </div> </div> </div> butterfly css blog Wed, 22 Apr 2026 15:44:58 +0000 https://dev.to/butterflycss/-1apo https://dev.to/butterflycss/-1apo <div class="ltag__link--embedded"> <div class="crayons-story "> <a href="https://dev.to/amrz-labs/butterfly-css-vs-tailwind-css-partners-or-rivals-422b" class="crayons-story__hidden-navigation-link">🦋⚔️🌀can butterfly css fly in tailwind weather ?</a> <div class="crayons-story__body crayons-story__body-full_post"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a class="crayons-logo crayons-logo--l" href="/amrz-labs"> <img alt="amrz-labs logo" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Forganization%2Fprofile_image%2F12983%2Fb4633cc0-a809-4d94-b3b1-4a503de77e38.png" class="crayons-logo__image" width="248" height="242"> </a> <a href="/butterflycss" class="crayons-avatar crayons-avatar--s absolute -right-2 -bottom-2 border-solid border-2 border-base-inverted "> <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3231977%2F2921f5c4-d969-421f-80f3-5d93f9fc6e41.jpg" alt="butterflycss profile" class="crayons-avatar__image" width="512" height="512"> </a> </div> <div> <div> <a href="/butterflycss" class="crayons-story__secondary fw-medium m:hidden"> butterfly css blog </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> butterfly css blog <div id="story-author-preview-content-3405236" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/butterflycss" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3231977%2F2921f5c4-d969-421f-80f3-5d93f9fc6e41.jpg" class="crayons-avatar__image" alt="" width="512" height="512"> </span> <span class="crayons-link crayons-subtitle-2 mt-5">butterfly css blog</span> </a> </div> <div class="print-hidden"> Follow </div> <div class="author-preview-metadata-container"></div> </div> </div> </div> <span> <span class="crayons-story__tertiary fw-normal"> for </span><a href="/amrz-labs" class="crayons-story__secondary fw-medium">amrz-labs</a> </span> </div> <a href="https://dev.to/amrz-labs/butterfly-css-vs-tailwind-css-partners-or-rivals-422b" class="crayons-story__tertiary fs-xs"><time>Mar 25</time><span class="time-ago-indicator-initial-placeholder"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title crayons-story__title-full_post"> <a href="https://dev.to/amrz-labs/butterfly-css-vs-tailwind-css-partners-or-rivals-422b" id="article-link-3405236"> 🦋⚔️🌀can butterfly css fly in tailwind weather ? </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/amrz-labs/butterfly-css-vs-tailwind-css-partners-or-rivals-422b" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="24" height="24"> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="24" height="24"> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="24" height="24"> </span> </span> <span class="aggregate_reactions_counter">6<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="https://dev.to/amrz-labs/butterfly-css-vs-tailwind-css-partners-or-rivals-422b#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center"> Comments 1<span class="hidden s:inline"> comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> <span class="bm-initial"> </span> <span class="bm-success"> </span> </div> </div> </div> </div> </div> </div> butterfly css blog Tue, 21 Apr 2026 22:10:36 +0000 https://dev.to/butterflycss/-105f https://dev.to/butterflycss/-105f <div class="crayons-card c-embed text-styles text-styles--secondary"> <div class="c-embed__content"> <div class="c-embed__cover"> <a href="https://dev.to/amrz-labs/the-first-product-ever-to-get-1-upvotes-did-it-happen-to-you-b3m" class="c-link align-middle" rel="noopener noreferrer"> <img alt="" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fca5ip3blyk6na80ik6es.png" height="auto" class="m-0"> </a> </div> <div class="c-embed__body"> <h2 class="fs-xl lh-tight"> <a href="https://dev.to/amrz-labs/the-first-product-ever-to-get-1-upvotes-did-it-happen-to-you-b3m" rel="noopener noreferrer" class="c-link"> the first product ever to get -1 upvotes did it happen to you?! - DEV Community </a> </h2> <p class="truncate-at-3"> yesterday i launched my framework butterfly css i asked gemini what do uthink of the launch will i be... </p> <div class="color-secondary fs-s flex items-center"> <img alt="favicon" class="c-embed__favicon m-0 mr-2 radius-0" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png"> dev.to </div> </div> </div> </div> butterfly css blog Tue, 21 Apr 2026 20:35:20 +0000 https://dev.to/butterflycss/-pic https://dev.to/butterflycss/-pic <div class="crayons-card c-embed text-styles text-styles--secondary"> <div class="c-embed__content"> <div class="c-embed__cover"> <a href="https://dev.to/amrz-labs/feel-i-invaded-half-the-world-when-i-see-country-analytics-3cjj" class="c-link align-middle" rel="noopener noreferrer"> <img alt="" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnn6rhmyutu6a4xw3uxye.png" height="auto" class="m-0"> </a> </div> <div class="c-embed__body"> <h2 class="fs-xl lh-tight"> <a href="https://dev.to/amrz-labs/feel-i-invaded-half-the-world-when-i-see-country-analytics-3cjj" rel="noopener noreferrer" class="c-link"> feel i invaded half the world just by coding! - DEV Community </a> </h2> <p class="truncate-at-3"> every one had anything like app, website and after months even years of work you look at the country... </p> <div class="color-secondary fs-s flex items-center"> <img alt="favicon" class="c-embed__favicon m-0 mr-2 radius-0" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png"> dev.to </div> </div> </div> </div> butterfly css blog Tue, 21 Apr 2026 20:32:22 +0000 https://dev.to/amrz-labs/feel-i-invaded-half-the-world-when-i-see-country-analytics-3cjj https://dev.to/amrz-labs/feel-i-invaded-half-the-world-when-i-see-country-analytics-3cjj <p>every one had anything like app, website and after months even years of work you look at the country analytics seeing half the world is blue suddenly you feel a very tasty feeling reminding me of history books of countries invaded <br> like i have an empire and what makes it more tasty the feeling that you didnt move from your room and invaded the world alone!<br> any one felt that before ?</p> webdev programming productivity discuss butterfly css blog Tue, 21 Apr 2026 20:23:18 +0000 https://dev.to/butterflycss/-6od https://dev.to/butterflycss/-6od <div class="ltag__link--embedded"> <div class="crayons-story "> <a href="https://dev.to/butterflycss/butterfly-css-v4-featuresthe-first-framework-for-kids-2132" class="crayons-story__hidden-navigation-link">butterfly css v4 features!🥰the first framework for kids🧸</a> <div class="crayons-story__body crayons-story__body-full_post"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/butterflycss" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3231977%2F2921f5c4-d969-421f-80f3-5d93f9fc6e41.jpg" alt="butterflycss profile" class="crayons-avatar__image" width="512" height="512"> </a> </div> <div> <div> <a href="/butterflycss" class="crayons-story__secondary fw-medium m:hidden"> butterfly css blog </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> butterfly css blog <div id="story-author-preview-content-3382928" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/butterflycss" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3231977%2F2921f5c4-d969-421f-80f3-5d93f9fc6e41.jpg" class="crayons-avatar__image" alt="" width="512" height="512"> </span> <span class="crayons-link crayons-subtitle-2 mt-5">butterfly css blog</span> </a> </div> <div class="print-hidden"> Follow </div> <div class="author-preview-metadata-container"></div> </div> </div> </div> </div> <a href="https://dev.to/butterflycss/butterfly-css-v4-featuresthe-first-framework-for-kids-2132" class="crayons-story__tertiary fs-xs"><time>Mar 22</time><span class="time-ago-indicator-initial-placeholder"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title crayons-story__title-full_post"> <a href="https://dev.to/butterflycss/butterfly-css-v4-featuresthe-first-framework-for-kids-2132" id="article-link-3382928"> butterfly css v4 features!🥰the first framework for kids🧸 </a> </h2> <div class="crayons-story__tags"> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/butterflycss/butterfly-css-v4-featuresthe-first-framework-for-kids-2132" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="24" height="24"> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="24" height="24"> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="24" height="24"> </span> </span> <span class="aggregate_reactions_counter">11<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="https://dev.to/butterflycss/butterfly-css-v4-featuresthe-first-framework-for-kids-2132#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center"> Comments 1<span class="hidden s:inline"> comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> <span class="bm-initial"> </span> <span class="bm-success"> </span> </div> </div> </div> </div> </div> </div> butterfly css blog Tue, 21 Apr 2026 17:31:46 +0000 https://dev.to/butterflycss/-4fll https://dev.to/butterflycss/-4fll <div class="crayons-card c-embed text-styles text-styles--secondary"> <div class="c-embed__content"> <div class="c-embed__cover"> <a href="https://dev.to/amrz-labs/stop-coding-start-drawing-introducing-butterfly-css-v42-1o1j" class="c-link align-middle" rel="noopener noreferrer"> <img alt="" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F86y7f4wjf22jztes1tb1.png" height="auto" class="m-0"> </a> </div> <div class="c-embed__body"> <h2 class="fs-xl lh-tight"> <a href="https://dev.to/amrz-labs/stop-coding-start-drawing-introducing-butterfly-css-v42-1o1j" rel="noopener noreferrer" class="c-link"> Stop Coding, Start Drawing: Butterfly CSS v4.2 🦋product hunt launch today - DEV Community </a> </h2> <p class="truncate-at-3"> Hi everyone! I'm Amr Kilany, and I've always had a slightly "crazy" goal: What if we stopped coding... </p> <div class="color-secondary fs-s flex items-center"> <img alt="favicon" class="c-embed__favicon m-0 mr-2 radius-0" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png"> dev.to </div> </div> </div> </div> butterfly css blog Tue, 21 Apr 2026 17:18:04 +0000 https://dev.to/butterflycss/-2jhg https://dev.to/butterflycss/-2jhg <div class="ltag__link--embedded"> <div class="crayons-story "> <a href="https://dev.to/butterflycss/how-to-make-moving-ball-animation-in-css-3i4a" class="crayons-story__hidden-navigation-link">make physics-driven moving balls without leaving your html</a> <div class="crayons-story__body crayons-story__body-full_post"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/butterflycss" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3231977%2F2921f5c4-d969-421f-80f3-5d93f9fc6e41.jpg" alt="butterflycss profile" class="crayons-avatar__image" width="512" height="512"> </a> </div> <div> <div> <a href="/butterflycss" class="crayons-story__secondary fw-medium m:hidden"> butterfly css blog </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> butterfly css blog <div id="story-author-preview-content-2756503" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/butterflycss" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3231977%2F2921f5c4-d969-421f-80f3-5d93f9fc6e41.jpg" class="crayons-avatar__image" alt="" width="512" height="512"> </span> <span class="crayons-link crayons-subtitle-2 mt-5">butterfly css blog</span> </a> </div> <div class="print-hidden"> Follow </div> <div class="author-preview-metadata-container"></div> </div> </div> </div> </div> <a href="https://dev.to/butterflycss/how-to-make-moving-ball-animation-in-css-3i4a" class="crayons-story__tertiary fs-xs"><time>Aug 6 '25</time><span class="time-ago-indicator-initial-placeholder"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title crayons-story__title-full_post"> <a href="https://dev.to/butterflycss/how-to-make-moving-ball-animation-in-css-3i4a" id="article-link-2756503"> make physics-driven moving balls without leaving your html </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " href="/t/beginners"><span class="crayons-tag__prefix">#</span>beginners</a> <a class="crayons-tag crayons-tag--monochrome " href="/t/animation"><span class="crayons-tag__prefix">#</span>animation</a> <a class="crayons-tag crayons-tag--monochrome " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/butterflycss/how-to-make-moving-ball-animation-in-css-3i4a" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="24" height="24"> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="24" height="24"> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="24" height="24"> </span> </span> <span class="aggregate_reactions_counter">4<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="https://dev.to/butterflycss/how-to-make-moving-ball-animation-in-css-3i4a#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center"> Comments 1<span class="hidden s:inline"> comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 1 min read </small> <span class="bm-initial"> </span> <span class="bm-success"> </span> </div> </div> </div> </div> </div> </div> butterfly css blog Tue, 21 Apr 2026 16:27:36 +0000 https://dev.to/butterflycss/-55nn https://dev.to/butterflycss/-55nn <div class="ltag__link--embedded"> <div class="crayons-story "> <a href="https://dev.to/butterflycss/stop-sending-boring-birthday-cards-code-them-instead-butterfly-css-challenge-2n0" class="crayons-story__hidden-navigation-link">Stop sending boring Birthday cards. Code them instead—butterfly css challenge 🦋🎂</a> <div class="crayons-story__body crayons-story__body-full_post"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/butterflycss" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3231977%2F2921f5c4-d969-421f-80f3-5d93f9fc6e41.jpg" alt="butterflycss profile" class="crayons-avatar__image" width="512" height="512"> </a> </div> <div> <div> <a href="/butterflycss" class="crayons-story__secondary fw-medium m:hidden"> butterfly css blog </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> butterfly css blog <div id="story-author-preview-content-3520618" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/butterflycss" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3231977%2F2921f5c4-d969-421f-80f3-5d93f9fc6e41.jpg" class="crayons-avatar__image" alt="" width="512" height="512"> </span> <span class="crayons-link crayons-subtitle-2 mt-5">butterfly css blog</span> </a> </div> <div class="print-hidden"> Follow </div> <div class="author-preview-metadata-container"></div> </div> </div> </div> </div> <a href="https://dev.to/butterflycss/stop-sending-boring-birthday-cards-code-them-instead-butterfly-css-challenge-2n0" class="crayons-story__tertiary fs-xs"><time>Apr 18</time><span class="time-ago-indicator-initial-placeholder"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title crayons-story__title-full_post"> <a href="https://dev.to/butterflycss/stop-sending-boring-birthday-cards-code-them-instead-butterfly-css-challenge-2n0" id="article-link-3520618"> Stop sending boring Birthday cards. Code them instead—butterfly css challenge 🦋🎂 </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " href="/t/birthday"><span class="crayons-tag__prefix">#</span>birthday</a> <a class="crayons-tag crayons-tag--monochrome " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/butterflycss/stop-sending-boring-birthday-cards-code-them-instead-butterfly-css-challenge-2n0" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="24" height="24"> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="24" height="24"> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="24" height="24"> </span> </span> <span class="aggregate_reactions_counter">8<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="https://dev.to/butterflycss/stop-sending-boring-birthday-cards-code-them-instead-butterfly-css-challenge-2n0#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center"> Comments <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 1 min read </small> <span class="bm-initial"> </span> <span class="bm-success"> </span> </div> </div> </div> </div> </div> </div> butterfly css blog Tue, 21 Apr 2026 15:34:22 +0000 https://dev.to/butterflycss/-227p https://dev.to/butterflycss/-227p <div class="ltag__link--embedded"> <div class="crayons-story "> <a href="https://dev.to/butterflycss/handdrawn-effect-in-html-100a" class="crayons-story__hidden-navigation-link">Handdrawn effect in html</a> <div class="crayons-story__body crayons-story__body-full_post"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/butterflycss" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3231977%2F2921f5c4-d969-421f-80f3-5d93f9fc6e41.jpg" alt="butterflycss profile" class="crayons-avatar__image" width="512" height="512"> </a> </div> <div> <div> <a href="/butterflycss" class="crayons-story__secondary fw-medium m:hidden"> butterfly css blog </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> butterfly css blog <div id="story-author-preview-content-2783213" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/butterflycss" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3231977%2F2921f5c4-d969-421f-80f3-5d93f9fc6e41.jpg" class="crayons-avatar__image" alt="" width="512" height="512"> </span> <span class="crayons-link crayons-subtitle-2 mt-5">butterfly css blog</span> </a> </div> <div class="print-hidden"> Follow </div> <div class="author-preview-metadata-container"></div> </div> </div> </div> </div> <a href="https://dev.to/butterflycss/handdrawn-effect-in-html-100a" class="crayons-story__tertiary fs-xs"><time>Aug 19 '25</time><span class="time-ago-indicator-initial-placeholder"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title crayons-story__title-full_post"> <a href="https://dev.to/butterflycss/handdrawn-effect-in-html-100a" id="article-link-2783213"> Handdrawn effect in html </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " href="/t/animation"><span class="crayons-tag__prefix">#</span>animation</a> <a class="crayons-tag crayons-tag--monochrome " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " href="/t/opensource"><span class="crayons-tag__prefix">#</span>opensource</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/butterflycss/handdrawn-effect-in-html-100a" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="24" height="24"> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="24" height="24"> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="24" height="24"> </span> </span> <span class="aggregate_reactions_counter">3<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="https://dev.to/butterflycss/handdrawn-effect-in-html-100a#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center"> Comments <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 1 min read </small> <span class="bm-initial"> </span> <span class="bm-success"> </span> </div> </div> </div> </div> </div> </div>