Complete system.

src/snek/static/fancy-button.js

@@ -7,7 +7,18 @@ class FancyButton extends HTMLElement {
     constructor(){
         super()
         this.attachShadow({mode:'open'})
+    }
+
+    connectedCallback() {
+
         this.container = document.createElement('span')
+        let size = this.getAttribute('size')
+        console.info({GG:size})
+        if(size == 'auto'){
+           size = '1%' 
+        }else{
+            size = '33%'
+        }
         this.styleElement = document.createElement("style")
         this.styleElement.innerHTML = `
         :root {
@@ -16,7 +27,7 @@ class FancyButton extends HTMLElement {
     }
         button {
             width: var(--width);
-            min-width: 33%;
+            min-width: ${size};
             padding: 10px;
             background-color: #f05a28;
             border: none;
@@ -26,19 +37,20 @@ class FancyButton extends HTMLElement {
             font-weight: bold;
             cursor: pointer;
             transition: background-color 0.3s;
+
+    border: 1px solid #f05a28;
     }
         button:hover {
         color: #EFEFEF;
     background-color: #e04924;
+    border: 1px solid #efefef;
   }
     `
     this.container.appendChild(this.styleElement)
         this.buttonElement = document.createElement('button')
         this.container.appendChild(this.buttonElement)
         this.shadowRoot.appendChild(this.container)
-    }
     
-    connectedCallback() {
         this.url = this.getAttribute('url');
         this.value = this.getAttribute('value')
         const me = this 

src/snek/templates/about.html

@@ -3,5 +3,5 @@
 {% block main %}
 
 <html-frame url="/about.md"></html-frame>
-<fancy-button text="Back" url="/back"></fancy-button>
+<fancy-button size="auto"  text="Back" url="/back"></fancy-button>
 {% endblock %}