Template:Clickable button - Revision history

Benos at 04:32, 6 December 2024

2024-12-06T04:32:45Z

@@ 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: 1px 1px; 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}}"
-    <span style="position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: #facc91;">
+      role="button"
       {{{text|{{{1|Button text}}}}}}
     </span>
-</span><noinclude>{{Documentation}}</noinclude>
+</span>

Ryan at 21:54, 24 September 2024

2024-09-24T21:54:42Z

← Older revision		Revision as of 21:54, 24 September 2024
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: ~~100px 100px~~; 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: 1px 1px; position: relative; display: inline-block;">
	<span style="position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: #facc91;">		<span style="position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: #facc91;">
	{{{text\|{{{1\|Button text}}}}}}		{{{text\|{{{1\|Button text}}}}}}
	</span>		</span>
	</span><noinclude>{{Documentation}}</noinclude>		</span><noinclude>{{Documentation}}</noinclude>

Ryan at 21:53, 24 September 2024

2024-09-24T21:53:42Z

← Older revision	Revision as of 21:53, 24 September 2024
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: 100px 100px; position: relative; display: inline-block;">
		<span style="position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: #facc91;">
		{{{text\|{{{1\|Button text}}}}}}
		</span>
		</span><noinclude>{{Documentation}}</noinclude>

Ryan: Blanked the page

2024-09-24T21:53:09Z

Blanked the page

← Older revision		Revision as of 21:53, 24 September 2024
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: 100px 100px; position: relative; display: inline-block;">
	~~<span style="position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: #facc91;">~~
	~~{{{text\|{{{1\|Button text}}}}}}~~
	~~</span>~~
	~~</span><noinclude>{{Documentation}}</noinclude>~~

Ryan at 21:09, 24 September 2024

2024-09-24T21:09:38Z

← Older revision		Revision as of 21:09, 24 September 2024
Line 1:		Line 1:
	<~~!-- Template:Clickable button -->~~		<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: 100px 100px; position: relative; display: inline-block;">
			<span style="position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: #facc91;">
	~~<div~~ class="mw-ui-button ~~clickable-button">~~		{{{text\|{{{1\|Button text}}}}}}
	~~<div class="button-content">~~		</span>
	~~[[File~~:{{{~~image~~\|}}}\|~~class~~=my-~~button~~-~~image~~\|~~alt~~=~~{{{alt~~\|}}~~}]]~~		</span><noinclude>{{Documentation}}</noinclude>

	<~~div class~~="my-~~button-text~~">
	{{{text\|{{{1\|Button text}}}}}}
	</~~div~~>
	</~~div~~>
	~~</div>~~
	<noinclude>{{Documentation}}</noinclude>

Ryan at 21:07, 24 September 2024

2024-09-24T21:07:50Z

← Older revision		Revision as of 21:07, 24 September 2024
Line 1:		Line 1:
	<~~div class="mw~~-ui-button~~" style="~~		<!-- Template:Clickable button -->
	~~position: relative;~~
	~~display: inline~~-~~block;~~
	~~padding: 100px;~~
	~~font~~-~~size: 1.5em;~~
	~~text-align: center;~~
	~~background-size: contain;~~
	~~background-repeat: no-repeat;~~
	~~background-position: center;~~
	~~background-image: url({{filepath:{{{image\|}}}}});~~
	">

	<!-- ~~Button Text -~~->		<div class="mw-ui-button clickable-button">
	<div ~~style~~="		<div class="button-content">
	~~position~~: ~~absolute;~~		[[File:{{{image\|}}}\|class=my-button-image\|alt={{{alt\|}}}]]
	~~bottom: 20px;~~
	~~left: 50%;~~		<div class="my-button-text">
	~~transform: translateX(~~-~~50%);~~		{{{text\|{{{1\|Button text}}}}}}
	~~color: #facc91;~~		</div>
	">
	{{{text\|{{{1\|Button text}}}}}}
	</div>		</div>

	</div>		</div>
	<noinclude>{{Documentation}}</noinclude>		<noinclude>{{Documentation}}</noinclude>

Ryan at 21:04, 24 September 2024

2024-09-24T21:04:42Z

← Older revision		Revision as of 21:04, 24 September 2024
Line 1:		Line 1:
	<div class="mw-ui-button" style="position: relative; display: inline-block; padding: 100px; font-size: 1.5em;">		<div class="mw-ui-button" style="
			position: relative;
	<!-- ~~Image~~ -->		display: inline-block;
	~~<img src="/path/to/images/~~{{~~{image\|NoImagePlaceholder.png}}}" alt="~~{{{~~alt~~\|}}~~}" class="my-button-image" style="width: {{{image_size\|100px~~}}};" />		padding: 100px;
			font-size: 1.5em;
			text-align: center;
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center;
			background-image: url({{filepath:{{{image\|}}}}});
			">

	<!-- Button Text -->		<!-- Button Text -->
	<div style="position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: #facc91;">		<div style="
			position: absolute;
			bottom: 20px;
			left: 50%;
			transform: translateX(-50%);
			color: #facc91;
			">
	{{{text\|{{{1\|Button text}}}}}}		{{{text\|{{{1\|Button text}}}}}}
	</div>		</div>

Ryan at 21:00, 24 September 2024

2024-09-24T21:00:31Z

← Older revision		Revision as of 21:00, 24 September 2024
Line 1:		Line 1:
	<!-- ~~Template~~:~~Clickable button~~ -->		<div class="mw-ui-button" style="position: relative; display: inline-block; padding: 100px; font-size: 1.5em;">

	~~<span class="mw-ui-button" role="button" aria-disabled="false" style="font-size: 1.5em; padding: 100px 100px; position: relative; display: inline-block;">~~

	<!-- Image -->		<!-- Image -->
	~~[[File:~~{{{image\|}}}\|{{{~~image_size~~\|~~100px~~}}}~~\|center\|~~class=my-button-image~~\|alt~~={{{~~alt~~\|}}}]]		<img src="/path/to/images/{{{image\|NoImagePlaceholder.png}}}" alt="{{{alt\|}}}" class="my-button-image" style="width: {{{image_size\|100px}}};" />

	<!-- Button Text -->		<!-- Button Text -->
	<~~span~~ style="position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: #facc91;">		<div style="position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: #facc91;">
	{{{text\|{{{1\|Button text}}}}}}		{{{text\|{{{1\|Button text}}}}}}
	</~~span~~>		</div>

	</~~span~~>		</div>
	<noinclude>{{Documentation}}</noinclude>		<noinclude>{{Documentation}}</noinclude>

Ryan at 20:51, 24 September 2024

2024-09-24T20:51:46Z

← Older revision		Revision as of 20:51, 24 September 2024
Line 1:		Line 1:
	<~~span class="mw~~-ui-~~button {{#switch~~: ~~{{{color\|white}}}~~		<!-- Template:Clickable button -->
	~~\| red = mw-ui-destructive~~
	~~\| green = mw-ui-progressive~~
	~~\| white =~~
	~~\| blue = mw-ui-progressive}}" role="~~button~~" aria~~-~~disabled="false" style="font~~-~~size: 1.5em; padding: 100px 100px; position: relative; display: inline-block;">~~

	~~<!-- Include Image if 'image' parameter is provided -->~~
	~~{{#if: {{{image\|}}} \|~~
	~~<img src="{{filepath:{{{image}}}}}" alt="{{{alt\|}}}" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: {{{image_width\|100px}}};" /~~>
	}}

			<span class="mw-ui-button" role="button" aria-disabled="false" style="font-size: 1.5em; padding: 100px 100px; position: relative; display: inline-block;">

			<!-- Image -->
			[[File:{{{image\|}}}\|{{{image_size\|100px}}}\|center\|class=my-button-image\|alt={{{alt\|}}}]]

	<!-- Button Text -->		<!-- Button Text -->
	<span style="position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: #facc91;">		<span style="position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: #facc91;">
	{{{text\|{{{1\|Button text}}}}}}		{{{text\|{{{1\|Button text}}}}}}
	</span>		</span>

	</span>		</span>
	<noinclude>{{Documentation}}</noinclude>		<noinclude>{{Documentation}}</noinclude>

Ryan at 20:46, 24 September 2024

2024-09-24T20:46:51Z

← Older revision		Revision as of 20:46, 24 September 2024
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="~~display: inline-flex; align-items: center; justify-content: center; flex-direction: column;~~ font-size: 1.5em; padding: 100px 100px;">		<span class="mw-ui-button {{#switch: {{{color\|white}}}
	{{#if: {{{image\|}}} \| ~~[[File~~:{{{image}}}\|{{{~~image_size~~\|100px}}}~~\|center]]~~ }}		\| red = mw-ui-destructive
	<span style="color: #facc91;">		\| green = mw-ui-progressive
			\| white =
			\| blue = mw-ui-progressive}}" role="button" aria-disabled="false" style="font-size: 1.5em; padding: 100px 100px; position: relative; display: inline-block;">

			<!-- Include Image if 'image' parameter is provided -->
			{{#if: {{{image\|}}} \|
			<img src="{{filepath:{{{image}}}}}" alt="{{{alt\|}}}" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: {{{image_width\|100px}}};" />
			}}

			<!-- Button Text -->
			<span style="position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: #facc91;">
	{{{text\|{{{1\|Button text}}}}}}		{{{text\|{{{1\|Button text}}}}}}
	</span>		</span>
	</span>		</span>
	<noinclude>{{Documentation}}</noinclude>		<noinclude>{{Documentation}}</noinclude>