MyBB Community Forums › Resources › MyCodes v
multi-function button

Threaded Mode
multi-function button
ikhwanulfikri Offline
Posts: 607
Threads: 134
Joined: Feb 2013
Reputation: 6
#1
Thumbs Up  2013-08-19, 02:17 PM (This post was last modified: 2013-08-20, 03:06 AM by ikhwanulfikri.)
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)
           
Website Find
Reply
imagey Offline
Posts: 23
Threads: 3
Joined: Feb 2012
Reputation: 0
#2
2013-08-22, 12:38 PM (This post was last modified: 2013-08-22, 12:46 PM by imagey.)
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.
Find
Reply
ikhwanulfikri Offline
Posts: 607
Threads: 134
Joined: Feb 2013
Reputation: 6
#3
2013-08-22, 01:20 PM (This post was last modified: 2013-08-22, 01:27 PM by ikhwanulfikri.)
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;
}
Website Find
Reply
imagey Offline
Posts: 23
Threads: 3
Joined: Feb 2012
Reputation: 0
#4
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.
Find
Reply
ikhwanulfikri Offline
Posts: 607
Threads: 134
Joined: Feb 2013
Reputation: 6
#5
2013-08-24, 04:32 AM (This post was last modified: 2013-08-24, 04:34 AM by ikhwanulfikri.)
use this code. : 
\[btn=([a-z0-9]+)\](.*?)\[/btn\]
Website Find
Reply
imagey Offline
Posts: 23
Threads: 3
Joined: Feb 2012
Reputation: 0
#6
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.
Find
Reply
ikhwanulfikri Offline
Posts: 607
Threads: 134
Joined: Feb 2013
Reputation: 6
#7
2013-08-24, 03:02 PM
Can you give me printscreen the error code. so that I can see.
Website Find
Reply
imagey Offline
Posts: 23
Threads: 3
Joined: Feb 2012
Reputation: 0
#8
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]
Find
Reply
ikhwanulfikri Offline
Posts: 607
Threads: 134
Joined: Feb 2013
Reputation: 6
#9
2013-09-08, 10:01 AM (This post was last modified: 2013-09-08, 10:04 AM by ikhwanulfikri.)
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
Website Find
Reply
imagey Offline
Posts: 23
Threads: 3
Joined: Feb 2012
Reputation: 0
#10
2013-12-01, 11:13 PM
Is there anyway to make them so you can click them and they take you to a url?
Find
Reply


Forum Jump:


Users browsing this thread: 3 Guest(s)