# 🖌 Color Picker... for Ladies ;-)

**URL:** <https://community.glideapps.com/t/color-picker-for-ladies/34573>\
**Category:** Project Showcase\
**Created:** [November 16, 2021, 2:29am UTC](https://community.glideapps.com/t/color-picker-for-ladies/34573 "2021-11-16T02:29:02Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [November 16, 2021, 2:29am UTC](https://community.glideapps.com/t/color-picker-for-ladies/34573/1 "2021-11-16T02:29:02Z")

</div>

Click any color button and the shoe will smoothly morph to that color.

By clicking the - + buttons, it will change item size.

This starter can be used for an online store, by changing quantity, it will change the total amount.

[![Color Picker](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/c/4cb191eb34fa389468c1254a8c7590cf97322f54.jpeg)](https://color-picker-demo.glideapp.io/)

> **[Color Picker DEMO](https://color-picker-demo.glideapp.io/dl/ewAiAHQAIgA6ADAALAAiAHMAIgA6ACIAYwBsAGEAcwBzAC0AQwBvAGwAbwByACAAUABpAGMAawBlAHIAIgAsACIAcgAiADoAIgBQAFQAbQBsAGgAdAB4AFMAUwB4AEcANABuAFgANQBuAHIARABQAGYAQwBRACIALAAiAG4AIgA6ACIAQwBvAGwAbwByACAAUABpAGMAawBlAHIAIgB9AA==)**
>
> change color and size of the item

available at [Templates Market](https://templates-market-sa.glideapp.io/full)

[![template market button](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/f/2f02068ccf21a3c7e9cd369b1832d946addf48c9.png)](https://templates-market-sa.glideapp.io/full)

---

<div class="post-metadata">

**Author:** ![Harsh\_Ganatra](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/harsh_ganatra/32/35515_2.png) [@Harsh\_Ganatra](https://community.glideapps.com/u/Harsh_Ganatra)\
**Post date:** [December 6, 2021, 6:31am UTC](https://community.glideapps.com/t/color-picker-for-ladies/34573/2 "2021-12-06T06:31:27Z")

</div>

This is beautiful! Is it an inline list of colors and visibility on image as clicked?  
Great stuff!

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [December 6, 2021, 6:32am UTC](https://community.glideapps.com/t/color-picker-for-ladies/34573/3 "2021-12-06T06:32:40Z")

</div>

it is a CSS opacity fade in and out

---

<div class="post-metadata">

**Author:** ![Harsh\_Ganatra](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/harsh_ganatra/32/35515_2.png) [@Harsh\_Ganatra](https://community.glideapps.com/u/Harsh_Ganatra)\
**Post date:** [December 6, 2021, 6:34am UTC](https://community.glideapps.com/t/color-picker-for-ladies/34573/4 "2021-12-06T06:34:36Z")

</div>

Oh wow! I haven’t come across using fade in CSS yet would love to try it out!

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [December 6, 2021, 6:36am UTC](https://community.glideapps.com/t/color-picker-for-ladies/34573/5 "2021-12-06T06:36:00Z")

</div>

ok, I will update the [Code BOOK](https://code-book.glideapp.io/) with that… give me 10 min.

---

<div class="post-metadata">

**Author:** ![Harsh\_Ganatra](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/harsh_ganatra/32/35515_2.png) [@Harsh\_Ganatra](https://community.glideapps.com/u/Harsh_Ganatra)\
**Post date:** [December 6, 2021, 6:36am UTC](https://community.glideapps.com/t/color-picker-for-ladies/34573/6 "2021-12-06T06:36:31Z")

</div>

Thank you so much!

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [December 6, 2021, 7:09am UTC](https://community.glideapps.com/t/color-picker-for-ladies/34573/7 "2021-12-06T07:09:14Z")

</div>

ok, I posted… just click the Code Book link and go to CSS codes.

> **[Code BOOK](https://code-book.glideapp.io/)**
>
> share cool codes, scripts and links