diff --git a/README.md b/README.md
index 0d49d74..78e465d 100644
--- a/README.md
+++ b/README.md
@@ -48,6 +48,7 @@ Use:
 | color     | [String, Object]  | `#75C791`  | If `String` - color of the button when checked <br>If `Object` - colors for the button when checked/uncheked <br>Example: `{checked: '#00FF00', unchecked: '#FF0000'}`  |
 | cssColors | Boolean           | false      | If `true` - deactivates the setting of colors through inline styles in favor of using CSS styling |
 | labels    | [Boolean, Object] | false      | If `Boolean` - shows/hides default labels ("on" and "off") <br>If `Object` - sets custom labels for both states. <br>Example: `{checked: 'Foo', unchecked: 'Bar'}`   |
+| switchColor     | [String, Object]            | `#BFCBD9`         | If `String` - color or background property of the switch when checked <br>If `Object` - colors or background property for the switch when checked/uncheked <br>Example: `{checked: '#25EF02', unchecked: 'linear-gradient(red, yellow)'}`   |
 | width     | Number            | 50         | Width of the button, default is 50 |
 | height    | Number            | 22         | Height of the button, default is 22 |
 
diff --git a/demo/src/App.vue b/demo/src/App.vue
index 7eac1b5..11739fb 100644
--- a/demo/src/App.vue
+++ b/demo/src/App.vue
@@ -34,6 +34,12 @@
           :color="{unchecked: '#FF6699'}"
           :labels="{unchecked: 'Disabled button'}"
           :disabled="true"/>
+        
+        <toggle-button :value="true"
+          :labels="{checked: 'Button', unchecked: 'Collor'}"
+          :color="{checked: '#7DCE94', unchecked: '#82C7EB'}"
+          :width="80"
+          :switchColor="{checked: 'linear-gradient(red, yellow)', unchecked: '#F2C00B'}"/>
       </div>
       <div style="padding-top: 20px;">
         <toggle-button
diff --git a/dist/index.js b/dist/index.js
index 0e6fec9..4a124f2 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -146,7 +146,8 @@ var constants = {
   labelUnchecked: 'off',
   width: 50,
   height: 22,
-  margin: 3
+  margin: 3,
+  switchColor: '#fff'
 };
 
 var contains = function contains(object, title) {
@@ -182,6 +183,12 @@ var px = function px(v) {
         return (typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'object' ? value.checked || value.unchecked : typeof value === 'string';
       }
     },
+    switchColor: {
+      type: [String, Object],
+      validator: function validator(value) {
+        return (typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'object' ? value.checked || value.unchecked : typeof value === 'string';
+      }
+    },
     cssColors: {
       type: Boolean,
       default: false
@@ -232,7 +239,8 @@ var px = function px(v) {
         width: px(this.buttonRadius),
         height: px(this.buttonRadius),
         transition: 'transform ' + this.speed + 'ms',
-        transform: this.toggled ? 'translate3d(' + this.distance + ', 3px, 0px)' : null
+        transform: this.toggled ? 'translate3d(' + this.distance + ', 3px, 0px)' : null,
+        background: this.switchColor ? this.switchColorCurrent : undefined
       };
     },
     labelStyle: function labelStyle() {
@@ -264,6 +272,28 @@ var px = function px(v) {
     },
     labelUnchecked: function labelUnchecked() {
       return contains(this.labels, 'unchecked') ? this.labels.unchecked : constants.labelUnchecked;
+    },
+    switchColorChecked: function switchColorChecked() {
+      var switchColor = this.switchColor;
+
+
+      return contains(switchColor, 'checked') ? switchColor.checked : constants.switchColor;
+    },
+    switchColorUnchecked: function switchColorUnchecked() {
+      var switchColor = this.switchColor;
+
+
+      return contains(switchColor, 'unchecked') ? switchColor.unchecked : constants.switchColor;
+    },
+    switchColorCurrent: function switchColorCurrent() {
+      var switchColor = this.switchColor;
+
+
+      if ((typeof switchColor === 'undefined' ? 'undefined' : _typeof(switchColor)) !== 'object') {
+        return switchColor || constants.switchColor;
+      }
+
+      return this.toggled ? this.switchColorChecked : this.switchColorUnchecked;
     }
   },
   watch: {
@@ -458,7 +488,7 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
     on: {
       "change": function($event) {
         $event.stopPropagation();
-        _vm.toggle($event)
+        return _vm.toggle($event)
       }
     }
   }), _vm._v(" "), _c('div', {
diff --git a/dist/ssr.index.js b/dist/ssr.index.js
index 8e2279f..dc1f41e 100644
--- a/dist/ssr.index.js
+++ b/dist/ssr.index.js
@@ -146,7 +146,8 @@ var constants = {
   labelUnchecked: 'off',
   width: 50,
   height: 22,
-  margin: 3
+  margin: 3,
+  switchColor: '#fff'
 };
 
 var contains = function contains(object, title) {
@@ -182,6 +183,12 @@ var px = function px(v) {
         return (typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'object' ? value.checked || value.unchecked : typeof value === 'string';
       }
     },
+    switchColor: {
+      type: [String, Object],
+      validator: function validator(value) {
+        return (typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'object' ? value.checked || value.unchecked : typeof value === 'string';
+      }
+    },
     cssColors: {
       type: Boolean,
       default: false
@@ -232,7 +239,8 @@ var px = function px(v) {
         width: px(this.buttonRadius),
         height: px(this.buttonRadius),
         transition: 'transform ' + this.speed + 'ms',
-        transform: this.toggled ? 'translate3d(' + this.distance + ', 3px, 0px)' : null
+        transform: this.toggled ? 'translate3d(' + this.distance + ', 3px, 0px)' : null,
+        background: this.switchColor ? this.switchColorCurrent : undefined
       };
     },
     labelStyle: function labelStyle() {
@@ -264,6 +272,28 @@ var px = function px(v) {
     },
     labelUnchecked: function labelUnchecked() {
       return contains(this.labels, 'unchecked') ? this.labels.unchecked : constants.labelUnchecked;
+    },
+    switchColorChecked: function switchColorChecked() {
+      var switchColor = this.switchColor;
+
+
+      return contains(switchColor, 'checked') ? switchColor.checked : constants.switchColor;
+    },
+    switchColorUnchecked: function switchColorUnchecked() {
+      var switchColor = this.switchColor;
+
+
+      return contains(switchColor, 'unchecked') ? switchColor.unchecked : constants.switchColor;
+    },
+    switchColorCurrent: function switchColorCurrent() {
+      var switchColor = this.switchColor;
+
+
+      if ((typeof switchColor === 'undefined' ? 'undefined' : _typeof(switchColor)) !== 'object') {
+        return switchColor || constants.switchColor;
+      }
+
+      return this.toggled ? this.switchColorChecked : this.switchColorUnchecked;
     }
   },
   watch: {
@@ -458,7 +488,7 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
     on: {
       "change": function($event) {
         $event.stopPropagation();
-        _vm.toggle($event)
+        return _vm.toggle($event)
       }
     }
   }), _vm._v(" "), _c('div', {
diff --git a/src/Button.vue b/src/Button.vue
index 45d3b4c..691cd16 100644
--- a/src/Button.vue
+++ b/src/Button.vue
@@ -32,7 +32,8 @@ const constants = {
   labelUnchecked: 'off',
   width: 50,
   height: 22,
-  margin: 3
+  margin: 3,
+  switchColor: '#fff'
 }
 
 const contains = (object, title) => {
@@ -68,6 +69,14 @@ export default {
           : typeof value === 'string'
       }
     },
+    switchColor: {
+      type: [String, Object],
+      validator (value) {
+        return typeof value === 'object'
+          ? (value.checked || value.unchecked)
+          : typeof value === 'string'
+      }
+    },
     cssColors: {
       type: Boolean,
       default: false
@@ -125,7 +134,8 @@ export default {
         transition: `transform ${this.speed}ms`,
         transform: this.toggled
           ? `translate3d(${this.distance}, 3px, 0px)`
-          : null
+          : null,
+        background: this.switchColor ? this.switchColorCurrent : undefined
       }
     },
 
@@ -171,7 +181,36 @@ export default {
       return contains(this.labels, 'unchecked')
         ? this.labels.unchecked
         : constants.labelUnchecked
+    },
+
+    switchColorChecked () {
+      let { switchColor } = this
+
+      return contains(switchColor, 'checked')
+        ? switchColor.checked
+        : constants.switchColor
+    },
+
+    switchColorUnchecked () {
+      let { switchColor } = this
+
+      return contains(switchColor, 'unchecked')
+        ? switchColor.unchecked
+        : constants.switchColor
+    },
+
+    switchColorCurrent () {
+      let { switchColor } = this
+
+      if (typeof switchColor !== 'object') {
+        return switchColor || constants.switchColor
+      }
+
+      return this.toggled
+        ? this.switchColorChecked
+        : this.switchColorUnchecked
     }
+
   },
   watch: {
     value (value) {