CSS3 Firefox Button

CSS3 Firefox Button

Mod Version: 1.00, by joomla

vB Version: 5.1.x	Rating: (0 vote - 0 average)	Installs: 3
Released: 28 Jan 2015	Last Update: Never	Downloads: 0
Not Supported Template Edits

Do you want to show the Firefox button in the forum?

let's get started!

1- yoursite/admincp
2- Styles & Templates / Style Manager

3:

HTML Code:

/* firefox button */
.demo-info {
	padding: 14px 26px;
	font-size: 14px;
	line-height: 100%;
	text-shadow: 0 1px rgba(0, 0, 0, 0.4);
	color: #fff;
	vertical-align: middle;
	text-align: center;
	cursor: pointer;
	font-weight: bold;
	transition: background 0.1s ease-in-out;
	-webkit-transition: background 0.1s ease-in-out;
	-moz-transition: background 0.1s ease-in-out;
	-ms-transition: background 0.1s ease-in-out;
	-o-transition: background 0.1s ease-in-out;
	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
	color: #fff;
	-webkit-border-radius: 40px;
	-moz-border-radius: 40px;
	border-radius: 40px;
	font-family: 'Helvetica Neue', Helvetica, sans-serif;
}
.demo-info:active {
	padding-top: 15px;
}
.demo-info, .demo-info:hover, .demo-info:active {
	outline: 0 none;
	text-decoration: none;
        color: #fff;
}
.demo-info-1 {
	background-color: #fdc058;
	box-shadow: 0px 3px 0px 0px #e29003;
}
.demo-info-1:hover {
	background-color: #fdb53a;
}
.demo-info-1:active {
	box-shadow: 0px 1px 0px 0px #e29003;
}
.demo-info-2 {
	background-color: #aa65c7;
	box-shadow: 0px 3px 0px 0px #883da7;
}
.demo-info-2:hover {
	background-color: #9e4fbf;
}
.demo-info-2:active {
	box-shadow: 0px 1px 0px 0px #883da7;
}
.demo-info-3 {
	background-color: #2ecc71;
	box-shadow: 0px 3px 0px 0px #239a55;
}
.demo-info-3:hover {
	background-color: #28b363;
}
.demo-info-3:active {
	box-shadow: 0px 1px 0px 0px #239a55;
}
	/* firefox button */
.ff {
  background-image:-webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.1));
  background-image:-moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.1));
  background-image:-ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.1));
  background-image:-o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.1));
  background-image:linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.1));
  display:inline-block;
  vertical-align:middle;
  margin:2px;
  font:italic 14px/32px Georgia,Serif;
  text-align:center;
  color:white;
  text-decoration:none;
  text-shadow:0px 1px 0px rgba(0,0,0,0.1);
  -webkit-box-shadow:inset 0px -3px 0px rgba(0,0,0,0.1), 0px 3px 0px rgba(0,0,0,0.1);
  -moz-box-shadow:inset 0px -3px 0px rgba(0,0,0,0.1), 0px 3px 0px rgba(0,0,0,0.1);
  box-shadow:inset 0px -3px 0px rgba(0,0,0,0.1), 0px 3px 0px rgba(0,0,0,0.1);
  padding:0px 15px 3px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
}
.ff.green {background-color:#82C43A;}
.ff.red   {background-color:#F5494C;}
.ff.blue  {background-color:#659AE0;}
.ff:hover {
  background-image:-webkit-linear-gradient(top, rgba(0,0,0,0.05), rgba(0,0,0,0.2));
  background-image:-moz-linear-gradient(top, rgba(0,0,0,0.05), rgba(0,0,0,0.2));
  background-image:-ms-linear-gradient(top, rgba(0,0,0,0.05), rgba(0,0,0,0.2));
  background-image:-o-linear-gradient(top, rgba(0,0,0,0.05), rgba(0,0,0,0.2));
  background-image:linear-gradient(top, rgba(0,0,0,0.05), rgba(0,0,0,0.2));
}
.ff:active {
  position:relative;
  top:2px;  
  -webkit-box-shadow:inset 0px -1px 0px rgba(0,0,0,0.1), 0px 2px 0px rgba(0,0,0,0.1);
  -moz-box-shadow:inset 0px -1px 0px rgba(0,0,0,0.1), 0px 2px 0px rgba(0,0,0,0.1);
  box-shadow:inset 0px -1px 0px rgba(0,0,0,0.1), 0px 2px 0px rgba(0,0,0,0.1);
}

6- Homepage / Edit Site / Edit Page
-Static HTML Module select
--Edit
Title: Enter the title
Paste the following code into the HTML field.
and save

HTML Code:

<a class="ff blue" href="#">Sign me up &raquo;</a> <!-- Firefox SignUp -->
<a class="ff red" href="#">Take Action Now!</a> <!-- Firefox SOPA -->
<a class="ff green" href="#">Download Button</a> <!-- Firefox Download -->

and a happy ending

Blue Button

HTML Code:

<a class="ff blue" href="#">Sign me up &raquo;</a> <!-- Firefox SignUp -->

Red Button

HTML Code:

<a class="ff red" href="#">Take Action Now!</a> <!-- Firefox SOPA -->

Green Button

HTML Code:

<a class="ff green" href="#">Download Button</a> <!-- Firefox Download -->

Button links?

PHP Code:


href="[B]#[/B]"

Let's meet again!

Thanks for Firefox buttons http://cssdeck.com/user/tovic

Download

No files for download.

vBulletin LTS