diff --git a/.changeset/nine-seas-drive.md b/.changeset/nine-seas-drive.md
new file mode 100644
index 00000000..6c41330f
--- /dev/null
+++ b/.changeset/nine-seas-drive.md
@@ -0,0 +1,5 @@
+---
+"create-anywidget": patch
+---
+
+Simplify default CSS class names
diff --git a/packages/create-anywidget/__tests__/__snapshots__/index.test.js.snap b/packages/create-anywidget/__tests__/__snapshots__/index.test.js.snap
index 843d1114..ffdf39b4 100644
--- a/packages/create-anywidget/__tests__/__snapshots__/index.test.js.snap
+++ b/packages/create-anywidget/__tests__/__snapshots__/index.test.js.snap
@@ -162,12 +162,11 @@ import "./widget.css";
 const render = createRender(() => {
 	const [value, setValue] = useModelState("value");
 	return (
-		<button
-			className="ipyfoo-counter-button"
-			onClick={() => setValue(value + 1)}
-		>
-			count is {value}
-		</button>
+		<div className="ipyfoo">
+			<button onClick={() => setValue(value + 1)}>
+				count is {value}
+			</button>
+		</div>
 	);
 });
 
@@ -176,7 +175,7 @@ export default { render };
     "path": "js/widget.jsx",
   },
   {
-    "content": ".ipyfoo-counter-button {
+    "content": ".ipyfoo button {
 	background: linear-gradient(
 		300deg,
 		#9933ff 33.26%,
@@ -196,7 +195,7 @@ export default { render };
 	transition: transform 0.25s ease-in-out;
 }
 
-.ipyfoo-counter-button:hover {
+.ipyfoo button:hover {
 	transform: scale(1.05);
 }
 ",
@@ -372,12 +371,11 @@ import "./widget.css";
 const render = createRender(() => {
 	const [value, setValue] = useModelState<number>("value");
 	return (
-		<button
-			className="ipyfoo-counter-button"
-			onClick={() => setValue(value + 1)}
-		>
-			count is {value}
-		</button>
+		<div className="ipyfoo">
+			<button onClick={() => setValue(value + 1)}>
+				count is {value}
+			</button>
+		</div>
 	);
 });
 
@@ -386,7 +384,7 @@ export default { render };
     "path": "js/widget.tsx",
   },
   {
-    "content": ".ipyfoo-counter-button {
+    "content": ".ipyfoo button {
 	background: linear-gradient(
 		300deg,
 		#9933ff 33.26%,
@@ -406,7 +404,7 @@ export default { render };
 	transition: transform 0.25s ease-in-out;
 }
 
-.ipyfoo-counter-button:hover {
+.ipyfoo button:hover {
 	transform: scale(1.05);
 }
 ",
@@ -598,7 +596,6 @@ class Widget(anywidget.AnyWidget):
 
 function render({ model, el }) {
 	let btn = document.createElement("button");
-	btn.classList.add("ipyfoo-counter-button");
 	btn.innerHTML = \`count is \${model.get("value")}\`;
 	btn.addEventListener("click", () => {
 		model.set("value", model.get("value") + 1);
@@ -607,6 +604,7 @@ function render({ model, el }) {
 	model.on("change:value", () => {
 		btn.innerHTML = \`count is \${model.get("value")}\`;
 	});
+	el.classList.add("ipyfoo");
 	el.appendChild(btn);
 }
 
@@ -615,7 +613,7 @@ export default { render };
     "path": "js/widget.js",
   },
   {
-    "content": ".ipyfoo-counter-button {
+    "content": ".ipyfoo button {
 	background: linear-gradient(
 		300deg,
 		#9933ff 33.26%,
@@ -635,7 +633,7 @@ export default { render };
 	transition: transform 0.25s ease-in-out;
 }
 
-.ipyfoo-counter-button:hover {
+.ipyfoo button:hover {
 	transform: scale(1.05);
 }
 ",
@@ -794,7 +792,6 @@ class Widget(anywidget.AnyWidget):
 /** @type {import("npm:@anywidget/types").Render<Model>} */
 function render({ model, el }) {
 	let btn = document.createElement("button");
-	btn.classList.add("ipyfoo-counter-button");
 	btn.innerHTML = \`count is \${model.get("value")}\`;
 	btn.addEventListener("click", () => {
 		model.set("value", model.get("value") + 1);
@@ -804,6 +801,7 @@ function render({ model, el }) {
 		confetti();
 		btn.innerHTML = \`count is \${model.get("value")}\`;
 	});
+	el.classList.add("ipyfoo");
 	el.appendChild(btn);
 }
 
@@ -812,7 +810,7 @@ export default { render };
     "path": "src/ipyfoo/static/widget.js",
   },
   {
-    "content": ".ipyfoo-counter-button {
+    "content": ".ipyfoo button {
 	background: linear-gradient(
 		300deg,
 		#9933ff 33.26%,
@@ -832,7 +830,7 @@ export default { render };
 	transition: transform 0.25s ease-in-out;
 }
 
-.ipyfoo-counter-button:hover {
+.ipyfoo button:hover {
 	transform: scale(1.05);
 }
 ",
@@ -1007,7 +1005,6 @@ interface WidgetModel {
 
 function render({ model, el }: RenderContext<WidgetModel>) {
 	let btn = document.createElement("button");
-	btn.classList.add("ipyfoo-counter-button");
 	btn.innerHTML = \`count is \${model.get("value")}\`;
 	btn.addEventListener("click", () => {
 		model.set("value", model.get("value") + 1);
@@ -1016,6 +1013,7 @@ function render({ model, el }: RenderContext<WidgetModel>) {
 	model.on("change:value", () => {
 		btn.innerHTML = \`count is \${model.get("value")}\`;
 	});
+	el.classList.add("ipyfoo");
 	el.appendChild(btn);
 }
 
@@ -1024,7 +1022,7 @@ export default { render };
     "path": "js/widget.ts",
   },
   {
-    "content": ".ipyfoo-counter-button {
+    "content": ".ipyfoo button {
 	background: linear-gradient(
 		300deg,
 		#9933ff 33.26%,
@@ -1044,7 +1042,7 @@ export default { render };
 	transition: transform 0.25s ease-in-out;
 }
 
-.ipyfoo-counter-button:hover {
+.ipyfoo button:hover {
 	transform: scale(1.05);
 }
 ",
@@ -1245,12 +1243,11 @@ import "./widget.css";
 const render = createRender(() => {
 	const [value, setValue] = useModelState("value");
 	return (
-		<button
-			className="ipyfoo-counter-button"
-			onClick={() => setValue(value + 1)}
-		>
-			count is {value}
-		</button>
+		<div className="ipyfoo">
+			<button onClick={() => setValue(value + 1)}>
+				count is {value}
+			</button>
+		</div>
 	);
 });
 
@@ -1259,7 +1256,7 @@ export default { render };
     "path": "js/widget.jsx",
   },
   {
-    "content": ".ipyfoo-counter-button {
+    "content": ".ipyfoo button {
 	background: linear-gradient(
 		300deg,
 		#9933ff 33.26%,
@@ -1279,7 +1276,7 @@ export default { render };
 	transition: transform 0.25s ease-in-out;
 }
 
-.ipyfoo-counter-button:hover {
+.ipyfoo button:hover {
 	transform: scale(1.05);
 }
 ",
@@ -1456,12 +1453,11 @@ import "./widget.css";
 const render = createRender(() => {
 	const [value, setValue] = useModelState<number>("value");
 	return (
-		<button
-			className="ipyfoo-counter-button"
-			onClick={() => setValue(value + 1)}
-		>
-			count is {value}
-		</button>
+		<div className="ipyfoo">
+			<button onClick={() => setValue(value + 1)}>
+				count is {value}
+			</button>
+		</div>
 	);
 });
 
@@ -1470,7 +1466,7 @@ export default { render };
     "path": "js/widget.tsx",
   },
   {
-    "content": ".ipyfoo-counter-button {
+    "content": ".ipyfoo button {
 	background: linear-gradient(
 		300deg,
 		#9933ff 33.26%,
@@ -1490,7 +1486,7 @@ export default { render };
 	transition: transform 0.25s ease-in-out;
 }
 
-.ipyfoo-counter-button:hover {
+.ipyfoo button:hover {
 	transform: scale(1.05);
 }
 ",
@@ -1684,7 +1680,6 @@ class Widget(anywidget.AnyWidget):
 
 function render({ model, el }) {
 	let btn = document.createElement("button");
-	btn.classList.add("ipyfoo-counter-button");
 	btn.innerHTML = \`count is \${model.get("value")}\`;
 	btn.addEventListener("click", () => {
 		model.set("value", model.get("value") + 1);
@@ -1693,6 +1688,7 @@ function render({ model, el }) {
 	model.on("change:value", () => {
 		btn.innerHTML = \`count is \${model.get("value")}\`;
 	});
+	el.classList.add("ipyfoo");
 	el.appendChild(btn);
 }
 
@@ -1701,7 +1697,7 @@ export default { render };
     "path": "js/widget.js",
   },
   {
-    "content": ".ipyfoo-counter-button {
+    "content": ".ipyfoo button {
 	background: linear-gradient(
 		300deg,
 		#9933ff 33.26%,
@@ -1721,7 +1717,7 @@ export default { render };
 	transition: transform 0.25s ease-in-out;
 }
 
-.ipyfoo-counter-button:hover {
+.ipyfoo button:hover {
 	transform: scale(1.05);
 }
 ",
@@ -1880,7 +1876,6 @@ class Widget(anywidget.AnyWidget):
 /** @type {import("npm:@anywidget/types").Render<Model>} */
 function render({ model, el }) {
 	let btn = document.createElement("button");
-	btn.classList.add("ipyfoo-counter-button");
 	btn.innerHTML = \`count is \${model.get("value")}\`;
 	btn.addEventListener("click", () => {
 		model.set("value", model.get("value") + 1);
@@ -1890,6 +1885,7 @@ function render({ model, el }) {
 		confetti();
 		btn.innerHTML = \`count is \${model.get("value")}\`;
 	});
+	el.classList.add("ipyfoo");
 	el.appendChild(btn);
 }
 
@@ -1898,7 +1894,7 @@ export default { render };
     "path": "src/ipyfoo/static/widget.js",
   },
   {
-    "content": ".ipyfoo-counter-button {
+    "content": ".ipyfoo button {
 	background: linear-gradient(
 		300deg,
 		#9933ff 33.26%,
@@ -1918,7 +1914,7 @@ export default { render };
 	transition: transform 0.25s ease-in-out;
 }
 
-.ipyfoo-counter-button:hover {
+.ipyfoo button:hover {
 	transform: scale(1.05);
 }
 ",
@@ -2094,7 +2090,6 @@ interface WidgetModel {
 
 function render({ model, el }: RenderContext<WidgetModel>) {
 	let btn = document.createElement("button");
-	btn.classList.add("ipyfoo-counter-button");
 	btn.innerHTML = \`count is \${model.get("value")}\`;
 	btn.addEventListener("click", () => {
 		model.set("value", model.get("value") + 1);
@@ -2103,6 +2098,7 @@ function render({ model, el }: RenderContext<WidgetModel>) {
 	model.on("change:value", () => {
 		btn.innerHTML = \`count is \${model.get("value")}\`;
 	});
+	el.classList.add("ipyfoo");
 	el.appendChild(btn);
 }
 
@@ -2111,7 +2107,7 @@ export default { render };
     "path": "js/widget.ts",
   },
   {
-    "content": ".ipyfoo-counter-button {
+    "content": ".ipyfoo button {
 	background: linear-gradient(
 		300deg,
 		#9933ff 33.26%,
@@ -2131,7 +2127,7 @@ export default { render };
 	transition: transform 0.25s ease-in-out;
 }
 
-.ipyfoo-counter-button:hover {
+.ipyfoo button:hover {
 	transform: scale(1.05);
 }
 ",
diff --git a/packages/create-anywidget/create.js b/packages/create-anywidget/create.js
index 5bfec79a..5b70a1b3 100644
--- a/packages/create-anywidget/create.js
+++ b/packages/create-anywidget/create.js
@@ -234,7 +234,7 @@ let notebook = (name) =>
 /** @param {string} name */
 let styles = (name) =>
 	`\
-.${name}-counter-button {
+.${name} button {
 	background: linear-gradient(
 		300deg,
 		#9933ff 33.26%,
@@ -254,7 +254,7 @@ let styles = (name) =>
 	transition: transform 0.25s ease-in-out;
 }
 
-.${name}-counter-button:hover {
+.${name} button:hover {
 	transform: scale(1.05);
 }
 `;
@@ -269,12 +269,11 @@ import "./widget.css";
 const render = createRender(() => {
 	const [value, setValue] = useModelState<number>("value");
 	return (
-		<button
-			className="${name}-counter-button"
-			onClick={() => setValue(value + 1)}
-		>
-			count is {value}
-		</button>
+		<div className="${name}">
+			<button onClick={() => setValue(value + 1)}>
+				count is {value}
+			</button>
+		</div>
 	);
 });
 
@@ -291,12 +290,11 @@ import "./widget.css";
 const render = createRender(() => {
 	const [value, setValue] = useModelState("value");
 	return (
-		<button
-			className="${name}-counter-button"
-			onClick={() => setValue(value + 1)}
-		>
-			count is {value}
-		</button>
+		<div className="${name}">
+			<button onClick={() => setValue(value + 1)}>
+				count is {value}
+			</button>
+		</div>
 	);
 });
 
@@ -310,7 +308,6 @@ import "./widget.css";
 
 function render({ model, el }) {
 	let btn = document.createElement("button");
-	btn.classList.add("${name}-counter-button");
 	btn.innerHTML = \`count is \${model.get("value")}\`;
 	btn.addEventListener("click", () => {
 		model.set("value", model.get("value") + 1);
@@ -319,6 +316,7 @@ function render({ model, el }) {
 	model.on("change:value", () => {
 		btn.innerHTML = \`count is \${model.get("value")}\`;
 	});
+	el.classList.add("${name}");
 	el.appendChild(btn);
 }
 
@@ -339,7 +337,6 @@ interface WidgetModel {
 
 function render({ model, el }: RenderContext<WidgetModel>) {
 	let btn = document.createElement("button");
-	btn.classList.add("${name}-counter-button");
 	btn.innerHTML = \`count is \${model.get("value")}\`;
 	btn.addEventListener("click", () => {
 		model.set("value", model.get("value") + 1);
@@ -348,6 +345,7 @@ function render({ model, el }: RenderContext<WidgetModel>) {
 	model.on("change:value", () => {
 		btn.innerHTML = \`count is \${model.get("value")}\`;
 	});
+	el.classList.add("${name}");
 	el.appendChild(btn);
 }
 
@@ -515,7 +513,6 @@ import confetti from "https://esm.sh/canvas-confetti@1";
 /** @type {import("npm:@anywidget/types").Render<Model>} */
 function render({ model, el }) {
 	let btn = document.createElement("button");
-	btn.classList.add("${name}-counter-button");
 	btn.innerHTML = \`count is \${model.get("value")}\`;
 	btn.addEventListener("click", () => {
 		model.set("value", model.get("value") + 1);
@@ -525,6 +522,7 @@ function render({ model, el }) {
 		confetti();
 		btn.innerHTML = \`count is \${model.get("value")}\`;
 	});
+	el.classList.add("${name}");
 	el.appendChild(btn);
 }