# How to customize button colors or add new ones?

**URL:** <https://forum.ionicframework.com/t/how-to-customize-button-colors-or-add-new-ones/11720>\
**Category:** ionic-v1\
**Created:** [October 25, 2014, 10:04am UTC](https://forum.ionicframework.com/t/how-to-customize-button-colors-or-add-new-ones/11720 "2014-10-25T10:04:18Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![arlevi](https://avatars.discourse-cdn.com/v4/letter/a/6a8cbe/32.png) [@arlevi](https://forum.ionicframework.com/u/arlevi)\
**Post date:** [October 25, 2014, 10:04am UTC](https://forum.ionicframework.com/t/how-to-customize-button-colors-or-add-new-ones/11720/1 "2014-10-25T10:04:18Z")

</div>

How can I add new button colors ? and where should I place it ( in my style.css or ? )

I’m not sure if adding them to www/lib/ionic/css/ is the right way …

EDIT: found a tutorial on your website, but I’m really confused  
Doc: [http://ionicframework.com/tutorials/customizing-ionic-with-sass/](http://ionicframework.com/tutorials/customizing-ionic-with-sass/) vs  
Video: [http://learn.ionicframework.com/videos/sass/](http://learn.ionicframework.com/videos/sass/)

- “ionic setup sass” doesn’t appear in the doc
- sass --watch scss/app.scss:css/app.css, running this creates “css” dir in the root level ?!

---

<div class="post-metadata">

**Author:** ![kai23](https://avatars.discourse-cdn.com/v4/letter/k/c89c15/32.png) [@kai23](https://forum.ionicframework.com/u/kai23)\
**Post date:** [October 25, 2014, 12:55pm UTC](https://forum.ionicframework.com/t/how-to-customize-button-colors-or-add-new-ones/11720/2 "2014-10-25T12:55:21Z")

</div>

As you said, you can use `ionic setup sass` to… setup the project using sass, and then edit the `scss/ionic.app.scss` to edit existing colors.

To find examples of the sass code used, you can open the `www/lib/ionic/scss/_variables.scss` file to find what already exists.

I don’t know if it answers your question but well… that’s how I do.

---

<div class="post-metadata">

**Author:** ![arlevi](https://avatars.discourse-cdn.com/v4/letter/a/6a8cbe/32.png) [@arlevi](https://forum.ionicframework.com/u/arlevi)\
**Post date:** [October 26, 2014, 6:53pm UTC](https://forum.ionicframework.com/t/how-to-customize-button-colors-or-add-new-ones/11720/3 "2014-10-26T18:53:27Z")

</div>

Since I just wanted to add button colors on top of what Ionic already have - this is what I did:

```
$ ionic setup sass    
# in the directory "scss" that was created I added a file "app.scss" and converted to CSS:
$ sass --watch scss/app.scss:www/css/style.css

```

And then just added “style.css” to the index.html.  
Is this also an acceptable way ? or I missed the point here 😄

---

<div class="post-metadata">

**Author:** ![kai23](https://avatars.discourse-cdn.com/v4/letter/k/c89c15/32.png) [@kai23](https://forum.ionicframework.com/u/kai23)\
**Post date:** [October 28, 2014, 10:01am UTC](https://forum.ionicframework.com/t/how-to-customize-button-colors-or-add-new-ones/11720/4 "2014-10-28T10:01:08Z")

</div>

Do you really need to add the watch ?

Take a quick look in `gulpfile.js` and you will find this :

```
gulp.task('watch', function() {
  gulp.watch(paths.sass, ['sass']);
});

```

Maybe you could just change it a little bit ?

---

<div class="post-metadata">

**Author:** ![arlevi](https://avatars.discourse-cdn.com/v4/letter/a/6a8cbe/32.png) [@arlevi](https://forum.ionicframework.com/u/arlevi)\
**Post date:** [October 28, 2014, 11:59am UTC](https://forum.ionicframework.com/t/how-to-customize-button-colors-or-add-new-ones/11720/5 "2014-10-28T11:59:44Z")

</div>

ohhh you right, I can also add it the to “task” section where it shrink it as well 🙂 Thanks !

---

<div class="post-metadata">

**Author:** ![arlevi](https://avatars.discourse-cdn.com/v4/letter/a/6a8cbe/32.png) [@arlevi](https://forum.ionicframework.com/u/arlevi)\
**Post date:** [November 1, 2014, 8:59pm UTC](https://forum.ionicframework.com/t/how-to-customize-button-colors-or-add-new-ones/11720/6 "2014-11-01T20:59:41Z")

</div>

Thanks for the help !  
Eventually this is what I changed:

```
vi gulpfile.js

```

Changed this:

```
gulp.src('./scss/ionic.app.scss')

```

To:

```
gulp.src('./scss/*.scss')

```

Then starting ionic:

```
$ gulp sass # not sure about this one, but what the hell ... nothing worked before that ..
$ ionic serve
  Running serve task...
  Running dev server at http://0.0.0.0:8100
  Running live reload server at http://0.0.0.0:35729
  Changed www/css/app.css
  Changed www/css/ionic.app.css
  Changed www/css/app.min.css
  Changed www/css/ionic.app.min.css
```