diff --git a/addons/web/static/src/views/fields/x2many/x2many_field.js b/addons/web/static/src/views/fields/x2many/x2many_field.js
index 74025398626..6d34eed63ee 100644
--- a/addons/web/static/src/views/fields/x2many/x2many_field.js
+++ b/addons/web/static/src/views/fields/x2many/x2many_field.js
@@ -44,7 +44,10 @@ export class X2ManyField extends Component {
         );
 
         this.archInfo = this.props.views?.[this.props.viewMode] || {};
-        this.className = computeViewClassName(this.props.viewMode, this.archInfo.xmlDoc);
+        const classes = this.props.viewMode
+            ? ["o_field_x2many", `o_field_x2many_${this.props.viewMode}`]
+            : ["o_field_x2many"];
+        this.className = computeViewClassName(this.props.viewMode, this.archInfo.xmlDoc, classes);
 
         const { activeActions, creates } = this.archInfo;
         if (this.props.viewMode === "kanban") {
diff --git a/addons/web/static/src/views/fields/x2many/x2many_field.xml b/addons/web/static/src/views/fields/x2many/x2many_field.xml
index 2702bd856ee..2d0f243ce40 100644
--- a/addons/web/static/src/views/fields/x2many/x2many_field.xml
+++ b/addons/web/static/src/views/fields/x2many/x2many_field.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="web.X2ManyField" owl="1">
-        <div t-att-class="className" t-attf-class="o_field_x2many o_field_x2many_{{props.viewMode}}">
+        <div t-att-class="className">
             <div class="o_x2m_control_panel">
                 <t t-if="displayControlPanelButtons">
                     <div class="o_cp_buttons" role="toolbar" aria-label="Control panel buttons" t-ref="buttons">
@@ -15,7 +15,7 @@
                                 t-on-click.stop.prevent="() => this.onAdd({ context: create.context })"
                             >
                                 <t t-esc="create.string"/>
-                            </a>
+                            </button>
                             <ViewButton
                                 t-if="create.type === 'button'"
                                 className="`${create.className}`"
diff --git a/addons/web/static/src/views/utils.js b/addons/web/static/src/views/utils.js
index 84d5fdc41de..c5101fe3df7 100644
--- a/addons/web/static/src/views/utils.js
+++ b/addons/web/static/src/views/utils.js
@@ -83,17 +83,33 @@ export function archParseBoolean(str, trueIfEmpty = false) {
     return str ? !/^false|0$/i.test(str) : trueIfEmpty;
 }
 
+/**
+ * @param {string?} type
+ * @returns {string | false}
+ */
+function getViewClass(type) {
+    const isValidType = Boolean(type) && registry.category("views").contains(type);
+    return isValidType && `o_${type}_view`;
+}
+
+/**
+ * @param {string?} viewType
+ * @param {Element?} rootNode
+ * @param {string[]} additionalClassList
+ * @returns {string}
+ */
 export function computeViewClassName(viewType, rootNode, additionalClassList = []) {
-    const subType = rootNode.getAttribute("js_class");
-    const isValidSubType = subType && registry.category("views").contains(subType);
-    const subTypeClass = isValidSubType ? `o_${subType}_view` : "";
-    const classList = [
-        `o_${viewType}_view`,
-        subTypeClass,
-        ...(rootNode.getAttribute("class") || "").split(" "),
+    const subType = rootNode?.getAttribute("js_class");
+    const classList = rootNode?.getAttribute("class")?.split(" ") || [];
+    const uniqueClasses = new Set([
+        getViewClass(viewType),
+        getViewClass(subType),
+        ...classList,
         ...additionalClassList,
-    ];
-    return [...new Set(classList)].filter((c) => c).join(" ");
+    ]);
+    return Array.from(uniqueClasses)
+        .filter((c) => c) // remove falsy values
+        .join(" ");
 }
 
 /**