multi-function button
#1
Thumbs Up 
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]


Attached Files Thumbnail(s)
           
Reply
#2
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.
Reply
#3
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;
}
Reply
#4
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.
Reply
#5
use this code. :
\[btn=([a-z0-9]+)\](.*?)\[/btn\]
Reply
#6
(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.
Reply
#7
Can you give me printscreen the error code. so that I can see.
Reply
#8
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]
Reply
#9
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
Reply
#10
Is there anyway to make them so you can click them and they take you to a url?
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)