| joomla |
01-26-2015 10:00 PM |
CSS3 Firefox Button
1 Attachment(s)
Do you want to show the Firefox button in the forum?
https://vborg.vbsupport.ru/external/2015/01/6.png
let's get started!
1- yoursite/admincp
2- Styles & Templates / Style Manager
3:
https://vborg.vbsupport.ru/external/2015/01/9.jpg
4:
https://vborg.vbsupport.ru/external/2015/01/10.jpg
5:
https://vborg.vbsupport.ru/external/2015/01/11.jpg
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 »</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
https://vborg.vbsupport.ru/external/2015/01/12.jpg
Blue Button
HTML Code:
<a class="ff blue" href="#">Sign me up »</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?
:up:
Let's meet again! :p
Thanks for Firefox buttons Taufik Nurrohman |
More Information