react/components/Html/styles.css

@@ -1,3 +1,12 @@
 [class*="html--pdp-breadcrumb"] {
   background-color: #FFFFFF;
 }
+
+
+[class*="html--add-to-cart-button"] button {
+  background-color: #000000;
+  border: none;
+  width: 526px;
+  height: 49px;
+  padding: 12px 64px;
+}

store/blocks/minicart.jsonc

@@ -2,10 +2,20 @@
   "add-to-cart-button": {
     "props": {
       "addToCartFeedback": "customEvent",
-      "customPixelEventId": "add-to-cart-button"
+      "customPixelEventId": "add-to-cart-button",
+      "text": "ADICIONAR À SACOLA"
     }
   },
 
+  "html#add-to-cart-button": {
+    "props":{
+      "tag": "div",
+      "testId": "add-to-cart-button",
+      "blockClass": "add-to-cart-button"
+    },
+    "children": ["add-to-cart-button"]
+  },
+
   "minicart.v2": {
     "props": {
       "customPixelEventId": "add-to-cart-button"

store/blocks/pdp/product.jsonc

@@ -161,7 +161,7 @@
       "marginTop": 4,
       "marginBottom": 7
     },
-    "children": ["add-to-cart-button"]
+    "children": ["html#add-to-cart-button"]
   },
 
   "flex-layout.row#product-availability": {

styles/css/vtex.add-to-cart-button.css

@@ -0,0 +1,14 @@
+/*
+0 - 600PX: Phone
+600 - 900px: Table portrait
+900 - 1200px: Tablet landscape
+[1200 - 1800] is where our nortal styles apply
+1800px + : Big desktop
+*/
+/* Media Query M3 */
+/* Grid breakpoints */
+.buttonText {
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25px;
+}

styles/sass/pages/product/vtex.add-to-cart-button.scss

@@ -0,0 +1,5 @@
+.buttonText {
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25px;
+}