MyBB Community Forums

MyBB Community Forums > Resources > MyCodes > multi-function button
Full Version: multi-function button
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2

ikhwanulfikri

2013-08-19, 02:17 PM
I think the code is very flexyble button once.

take a look at a few examples of this:

we can make:
highlight text with very pretty with this code.
create image with description
create titles. and much more.
and that certainly is the make button.

if any creative minds on this application please coment code below.

its this code :

Regular Expression *
\[btn=([a-z]+)\](.*?)\[/btn\]

Replacement *
<button class="btn$1">$2</button>

and create css code in the template.

select your theme> add stylesheet

Title: mfb.css

and copy this code:

.btnblue{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
font-weight: bold;
	color: #ffffff;

	padding: 2px 2px;
	background: -moz-linear-gradient(
		top,
		#3083ba 0%,
		#2175b5);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#3083ba),
		to(#2175b5));
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border-radius: 0px;
	border: 0px solid #302626;
	-moz-box-shadow:
		0px 2px 2px rgba(000,000,000,1),
		inset 0px 0px 2px rgba(255,255,255,0);
	-webkit-box-shadow:
		0px 2px 2px rgba(000,000,000,1),
		inset 0px 0px 2px rgba(255,255,255,0);
	box-shadow:
		0px 2px 2px rgba(000,000,000,1),
		inset 0px 0px 2px rgba(255,255,255,0);
	text-shadow:
		0px 0px 0px rgba(000,000,000,0),
		0px 0px 0px rgba(255,255,255,0);

}

.btnred {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
font-weight: bold;
	color: #ffffff;
		padding: 2px 2px;
	background: -moz-linear-gradient(
		top,
		#ff0d00 0%,
		#ab0000);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#ff0d00),
		to(#ab0000));
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border-radius: 0px;
	border: 0px solid #7d0000;
	-moz-box-shadow:
		0px 2px 2px rgba(000,000,000,1),
		inset 0px 0px 2px rgba(255,255,255,0);
	-webkit-box-shadow:
		0px 2px 2px rgba(000,000,000,1),
		inset 0px 0px 2px rgba(255,255,255,0);
	box-shadow:
		0px 2px 2px rgba(000,000,000,1),
		inset 0px 0px 2px rgba(255,255,255,0);
	text-shadow:
		0px 0px 0px rgba(000,000,000,0),
		0px 0px 0px rgba(255,255,255,0);
}
.btnyellow{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
font-weight: bold;
	color: #ffffff;
		padding: 2px 2px;
	background: -moz-linear-gradient(
		top,
		#f7eb0d 0%,
		#bd882c);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#f7eb0d),
		to(#bd882c));
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border-radius: 0px;
	border: 0px solid #7d0000;
	-moz-box-shadow:
		0px 2px 2px rgba(000,000,000,1),
		inset 0px 0px 2px rgba(255,255,255,0);
	-webkit-box-shadow:
		0px 2px 2px rgba(000,000,000,1),
		inset 0px 0px 2px rgba(255,255,255,0);
	box-shadow:
		0px 2px 2px rgba(000,000,000,1),
		inset 0px 0px 2px rgba(255,255,255,0);
	text-shadow:
		0px 0px 0px rgba(000,000,000,0),
		0px 0px 0px rgba(255,255,255,0);
}

.btnbrown{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
font-weight: bold;
	color: #ffffff;
		padding: 2px 2px;
	background: -moz-linear-gradient(
		top,
		#b55f0e 0%,
		#805a18);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#b55f0e),
		to(#805a18));
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border-radius: 0px;
	border: 0px solid #7d0000;
	-moz-box-shadow:
		0px 2px 2px rgba(000,000,000,1),
		inset 0px 0px 2px rgba(255,255,255,0);
	-webkit-box-shadow:
		0px 2px 2px rgba(000,000,000,1),
		inset 0px 0px 2px rgba(255,255,255,0);
	box-shadow:
		0px 2px 2px rgba(000,000,000,1),
		inset 0px 0px 2px rgba(255,255,255,0);
	text-shadow:
		0px 0px 0px rgba(000,000,000,0),
		0px 0px 0px rgba(255,255,255,0);
}

.btngreen{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
font-weight: bold;
	color: #ffffff;
		padding: 2px 2px;
background: -moz-linear-gradient(
		top,
		#10de10 0%,
		#118511);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#10de10),
		to(#118511));
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border-radius: 0px;
	border: 0px solid #7d0000;
	-moz-box-shadow:
		0px 2px 2px rgba(000,000,000,1),
		inset 0px 0px 2px rgba(255,255,255,0);
	-webkit-box-shadow:
		0px 2px 2px rgba(000,000,000,1),
		inset 0px 0px 2px rgba(255,255,255,0);
	box-shadow:
		0px 2px 2px rgba(000,000,000,1),
		inset 0px 0px 2px rgba(255,255,255,0);
	text-shadow:
		0px 0px 0px rgba(000,000,000,0),
		0px 0px 0px rgba(255,255,255,0);
}

.btnorange{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
font-weight: bold;
	color: #ffffff;
		padding: 2px 2px;
background: -moz-linear-gradient(
		top,
		#f5760e 0%,
		#de6d10);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#f5760e),
		to(#de6d10));
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border-radius: 0px;
	border: 0px solid #7d0000;
	-moz-box-shadow:
		0px 2px 2px rgba(000,000,000,1),
		inset 0px 0px 2px rgba(255,255,255,0);
	-webkit-box-shadow:
		0px 2px 2px rgba(000,000,000,1),
		inset 0px 0px 2px rgba(255,255,255,0);
	box-shadow:
		0px 2px 2px rgba(000,000,000,1),
		inset 0px 0px 2px rgba(255,255,255,0);
	text-shadow:
		0px 0px 0px rgba(000,000,000,0),
		0px 0px 0px rgba(255,255,255,0);
}

.btnpurple{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
font-weight: bold;
	color: #ffffff;
		padding: 2px 2px;
background: -moz-linear-gradient(
		top,
		#9100ff 0%,
		#8410e3);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#9100ff),
		to(#8410e3));
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border-radius: 0px;
	border: 0px solid #7d0000;
	-moz-box-shadow:
		0px 2px 2px rgba(000,000,000,1),
		inset 0px 0px 2px rgba(255,255,255,0);
	-webkit-box-shadow:
		0px 2px 2px rgba(000,000,000,1),
		inset 0px 0px 2px rgba(255,255,255,0);
	box-shadow:
		0px 2px 2px rgba(000,000,000,1),
		inset 0px 0px 2px rgba(255,255,255,0);
	text-shadow:
		0px 0px 0px rgba(000,000,000,0),
		0px 0px 0px rgba(255,255,255,0);
}
.btnblack{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
font-weight: bold;
	color: #ffffff;
		padding: 2px 2px;
background: -moz-linear-gradient(
		top,
		#543c54 0%,
		#000000);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#543c54),
		to(#000000));
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border-radius: 0px;
	border: 0px solid #7d0000;
	-moz-box-shadow:
		0px 2px 2px rgba(000,000,000,1),
		inset 0px 0px 2px rgba(255,255,255,0);
	-webkit-box-shadow:
		0px 2px 2px rgba(000,000,000,1),
		inset 0px 0px 2px rgba(255,255,255,0);
	box-shadow:
		0px 2px 2px rgba(000,000,000,1),
		inset 0px 0px 2px rgba(255,255,255,0);
	text-shadow:
		0px 0px 0px rgba(000,000,000,0),
		0px 0px 0px rgba(255,255,255,0);
}
.btnwhite{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
font-weight: bold;
	color:  #000000;
		padding: 2px 2px;
background: -moz-linear-gradient(
		top,
		#fff7ff 0%,
		#fefcff);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#fff7ff),
		to(#fefcff));
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border-radius: 0px;
	border: 0px solid #7d0000;
	-moz-box-shadow:
		0px 2px 2px rgba(000,000,000,1),
		inset 0px 0px 2px rgba(255,255,255,0);
	-webkit-box-shadow:
		0px 2px 2px rgba(000,000,000,1),
		inset 0px 0px 2px rgba(255,255,255,0);
	box-shadow:
		0px 2px 2px rgba(000,000,000,1),
		inset 0px 0px 2px rgba(255,255,255,0);
	text-shadow:
		0px 0px 0px rgba(000,000,000,0),
		0px 0px 0px rgba(255,255,255,0);
}
.btngray{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
font-weight: bold;
	color: #ffffff;
		padding: 2px 2px;
background: -moz-linear-gradient(
		top,
		#949294 0%,
		#808080);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#949294),
		to(#808080));
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border-radius: 0px;
	border: 0px solid #7d0000;
	-moz-box-shadow:
		0px 2px 2px rgba(000,000,000,1),
		inset 0px 0px 2px rgba(255,255,255,0);
	-webkit-box-shadow:
		0px 2px 2px rgba(000,000,000,1),
		inset 0px 0px 2px rgba(255,255,255,0);
	box-shadow:
		0px 2px 2px rgba(000,000,000,1),
		inset 0px 0px 2px rgba(255,255,255,0);
	text-shadow:
		0px 0px 0px rgba(000,000,000,0),
		0px 0px 0px rgba(255,255,255,0);
}
.btnmagenta{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
font-weight: bold;
	color: #ffffff;
		padding: 2px 2px;
background: -moz-linear-gradient(
		top,
		#f090f0 0%,
		#ed13ed);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#f090f0),
		to(#ed13ed));
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border-radius: 0px;
	border: 0px solid #7d0000;
	-moz-box-shadow:
		0px 2px 2px rgba(000,000,000,1),
		inset 0px 0px 2px rgba(255,255,255,0);
	-webkit-box-shadow:
		0px 2px 2px rgba(000,000,000,1),
		inset 0px 0px 2px rgba(255,255,255,0);
	box-shadow:
		0px 2px 2px rgba(000,000,000,1),
		inset 0px 0px 2px rgba(255,255,255,0);
	text-shadow:
		0px 0px 0px rgba(000,000,000,0),
		0px 0px 0px rgba(255,255,255,0);
}

colors are supported:
gray
blue
brown
yellow
green
black
magenta
red
orange
white
purple

code example : 
[btn=red] write anything here. [/btn]

imagey

2013-08-22, 12:38 PM
This is really good. It's also a good way of getting people to notice that you have left them a warning.

edit: I've just noticed that if you choose grey. The button becomes click-able and changes colour on mouse over.

ikhwanulfikri

2013-08-22, 01:20 PM
try this code :

button color : gray [Image: 95d53b3a2124e03eb3f2c46f45a8c47a.png]
mouse over : blue [Image: 404bf42d85335627e4c1f02a5c78a32b.png]

.btngray1{
  font-family: Arial;
  color: #ffffff;
  font-size: 12px;
font-weight: bold;
  padding: 6px;
  text-decoration: none;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: 1px 1px 3px #666666;
  -moz-box-shadow: 1px 1px 3px #666666;
  box-shadow: 1px 1px 3px #666666;
  text-shadow: 0px 0px 0px #524552;
  border: solid #b09ba4 1px;
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#94858b), to(#6e6869));
  background: -moz-linear-gradient(top, #94858b, #6e6869);
  -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#94858b, endColorStr=#6e6869);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#94858b, endColorStr=#6e6869);
  display:inline-block; /* IE is so silly */
}
.btngray1:hover {
  background: #45678a;
}

imagey

2013-08-23, 07:24 PM
I've found out what i was doing wrong.

If you type it as Grey then it displays wrong, Where as if you type it as grey. Then it displays as it should.

ikhwanulfikri

2013-08-24, 04:32 AM
use this code. : 
\[btn=([a-z0-9]+)\](.*?)\[/btn\]

imagey

2013-08-24, 01:56 PM
(2013-08-24, 04:32 AM)ikhwanulfikri Wrote: [ -> ]use this code. : 
\[btn=([a-z0-9]+)\](.*?)\[/btn\]

Swapping that for the old code broke the buttons. So I replaced it back with the old one.

ikhwanulfikri

2013-08-24, 03:02 PM
Can you give me printscreen the error code. so that I can see.

imagey

2013-09-07, 03:36 PM
There wasn't any error code. just instead of the buttons appearing. it displayed the btn tags.

like this for instance. [btn=red] write anything here. [/btn]

ikhwanulfikri

2013-09-08, 10:01 AM
you try to replace the code above with this code. :

\[btn=([a-z0-9]+)\](.*?)\[/btn\]

and try to enter the code:

[btn=gray1] wrote anything here [/btn]

and you will get a mouse button over

imagey

2013-12-01, 11:13 PM
Is there anyway to make them so you can click them and they take you to a url?
Pages: 1 2
MyBB Community Forums > Resources > MyCodes > multi-function button