Template:Clickable button: Difference between revisions

Revision as of 21:10, 19 September 2024

   {{#if: 
       | <img src="{{{image}}}" alt="Button Image" style="max-width: 80%; height: auto; position: absolute; top: 10px; left: 50%; transform: translateX(-50%);">
       | 
   }}
   
       Button text

Template:Documentation

@@ Line 1: / Line 1: @@
-<span class="mw-ui-button {{#switch: {{{color|white}}} | red = mw-ui-destructive | green = mw-ui-progressive | white = | blue = mw-ui-progressive}}" role="button" aria-disabled="false" style="font-size: 1.5em; padding: 160px 120px; position: relative; display: inline-block;">
+<span class="mw-ui-button {{#switch: {{{color|white}}} | red = mw-ui-destructive | green = mw-ui-progressive | white = | blue = mw-ui-progressive}}" role="button" aria-disabled="false" style="font-size: 1.5em; padding: 20px 40px; position: relative; display: inline-block;">
-   {{#if: {{{image|}}}
+    {{#if: {{{image|}}}
-       | <img src="{{{image}}}" alt="Button Image" style="max-width: 100%; height: auto; position: absolute; top: 20px; left: 50%; transform: translateX(-50%);">
+        | <img src="{{{image}}}" alt="Button Image" style="max-width: 80%; height: auto; position: absolute; top: 10px; left: 50%; transform: translateX(-50%);">
-       |
+        |
-   }}
+    }}
-   <span style="position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: #facc91;">
+    <span style="position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); color: #facc91;">
-     {{{text|{{{1|Button text}}}}}}
+        {{{text|{{{1|Button text}}}}}}
-   </span>
+    </span>
 </span>
 <noinclude>{{Documentation}}</noinclude>