diff --git a/packages/devextreme/js/ui/date_box/ui.date_box.strategy.calendar.js b/packages/devextreme/js/ui/date_box/ui.date_box.strategy.calendar.js
index 1652ae88f67d..2e1f0871fba7 100644
--- a/packages/devextreme/js/ui/date_box/ui.date_box.strategy.calendar.js
+++ b/packages/devextreme/js/ui/date_box/ui.date_box.strategy.calendar.js
@@ -5,6 +5,9 @@ import { splitPair } from '../../core/utils/common';
 import { isFunction, isEmptyObject } from '../../core/utils/type';
 import { extend } from '../../core/utils/extend';
 import messageLocalization from '../../localization/message';
+import { isMaterial } from '../themes';
+
+const TODAY_BUTTON_CLASS = 'dx-button-today';
 
 const CalendarStrategy = DateBoxStrategy.inherit({
 
@@ -116,8 +119,8 @@ const CalendarStrategy = DateBoxStrategy.inherit({
     _getTodayButtonConfig() {
         const buttonsLocation = this.dateBox.option('buttonsLocation');
         const isButtonsLocationDefault = buttonsLocation === 'default';
-
         const position = isButtonsLocationDefault ? ['bottom', 'center'] : splitPair(buttonsLocation);
+        const stylingMode = isMaterial() ? 'text' : 'outlined';
 
         return {
             widget: 'dxButton',
@@ -126,7 +129,8 @@ const CalendarStrategy = DateBoxStrategy.inherit({
             options: {
                 onClick: (args) => { this._widget._toTodayView(args); },
                 text: this.dateBox.option('todayButtonText'),
-                type: 'today',
+                elementAttr: { class: TODAY_BUTTON_CLASS },
+                stylingMode,
             }
         };
     },
diff --git a/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox with datetime (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox with datetime (fluent-blue-light).png
index a96e03d3310d..f3bebfcf6875 100644
Binary files a/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox with datetime (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox with datetime (fluent-blue-light).png differ
diff --git a/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox with datetime (material-blue-light).png b/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox with datetime (material-blue-light).png
index 681a2c00d8b8..a99a79d38ff9 100644
Binary files a/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox with datetime (material-blue-light).png and b/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox with datetime (material-blue-light).png differ
diff --git a/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox with datetime without analog clock (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox with datetime without analog clock (fluent-blue-light).png
index 20cc2296f29b..0cffd277694a 100644
Binary files a/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox with datetime without analog clock (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox with datetime without analog clock (fluent-blue-light).png differ
diff --git a/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox with datetime without analog clock (material-blue-light).png b/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox with datetime without analog clock (material-blue-light).png
index 0cee0d5bff8d..9917fcc2ed04 100644
Binary files a/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox with datetime without analog clock (material-blue-light).png and b/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox with datetime without analog clock (material-blue-light).png differ
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/datebox.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/datebox.tests.js
index 579b30043872..141a33c5d67f 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/datebox.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/datebox.tests.js
@@ -58,6 +58,8 @@ const STATE_FOCUSED_CLASS = 'dx-state-focused';
 const BUTTONS_CONTAINER_CLASS = 'dx-texteditor-buttons-container';
 const GESTURE_COVER_CLASS = 'dx-gesture-cover';
 const DROP_DOWN_BUTTON_CLASS = 'dx-dropdowneditor-button';
+const BUTTON_CLASS = 'dx-button';
+const TODAY_BUTTON_CLASS = 'dx-button-today';
 const DROP_DOWN_BUTTON_VISIBLE_CLASS = 'dx-dropdowneditor-button-visible';
 const OVERLAY_CONTENT_CLASS = 'dx-overlay-content';
 const OVERLAY_WRAPPER_CLASS = 'dx-overlay-wrapper';
@@ -74,7 +76,7 @@ const SHOW_INVALID_BADGE_CLASS = 'dx-show-invalid-badge';
 
 const APPLY_BUTTON_SELECTOR = '.dx-popup-done.dx-button';
 const CANCEL_BUTTON_SELECTOR = '.dx-popup-cancel.dx-button';
-const TODAY_BUTTON_SELECTOR = '.dx-button-today.dx-button';
+const TODAY_BUTTON_SELECTOR = `.${TODAY_BUTTON_CLASS}.${BUTTON_CLASS}`;
 const BUTTON_SELECTOR = '.dx-button';
 const TEXTBOX_SELECTOR = '.dx-textbox';
 
@@ -537,6 +539,19 @@ QUnit.module('toolbar buttons', {}, () => {
     ];
 
     types.forEach(type => {
+        QUnit.test(`Today button should have "dx-button-today" class (type=${type})`, function(assert) {
+            const dateBox = $('#dateBox').dxDateBox({
+                type,
+                pickerType: 'calendar',
+                opened: true,
+                applyValueMode: 'useButtons',
+            }).dxDateBox('instance');
+            const $overlayContent = $(dateBox.content()).parent();
+            const $todayButton = $overlayContent.find(`.${TODAY_BUTTON_CLASS}`);
+
+            assert.strictEqual($todayButton.length, 1);
+        });
+
         buttons.forEach(button => {
             QUnit.test(`"${button.optionName}" should customize ${button.name} button on init when type="${type}"`, function(assert) {
                 const $dateBox = $('#dateBox').dxDateBox({