Template:Clickable button: Difference between revisions

Latest revision as of 04:32, 6 December 2024

  
    Button text

Template:Documentation

@@ Line 1: / Line 1: @@
-<span class="mw-ui-button {{#switch: {{{color|white}}}
+<span class="mw-ui-button {{#switch: {{{color|white}}} | red = mw-ui-destructive | green = mw-ui-progressive | white = | blue = mw-ui-progressive}}"
-  | red = mw-ui-destructive
+      role="button"
-  | green = mw-ui-progressive
+      aria-disabled="false"
-  | white =
+      style="font-size: 1.5em; padding: 10px; position: relative; display: inline-block;
-  | blue = mw-ui-progressive}}" role="button" aria-disabled="false" style="font-size: 1.5em; padding: 100px 100px; position: relative; display: inline-block;">
+             background-color: #333; border-radius: 12px; border: 1px solid #555; overflow: hidden;">
-  <!-- Include Image if 'image' parameter is provided -->
+   <!-- Image over the button -->
-  {{#if: {{{image|}}} |
+   <span style="position: absolute; top: 0; left: 50%; transform: translateX(-50%);">
-    <img src="{{filepath:{{{image}}}}}" alt="{{{alt|}}}" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: {{{image_width|100px}}};" />
+      [[File:Misc.png|100px|link=https://wiki.cosmicsky.net/index.php?title=Miscellaneous|alt=Miscellaneous]]
-  }}
+   </span>
-  <!-- Button Text -->
+   <!-- Button Text -->
-  <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>