Scribd
Upload
142 views

Forum Mybb

The document provides CSS code for a Facebook login button. It instructs to add the "fb-login" class to the MyFacebook Connect link and includes PHP code for the link. It then provides CSS code to style the button with a Facebook icon, blue gradient background and borders, box shadow, and font formatting. Hover and active states are also styled.

Uploaded by

Cleverson Jose Godinho
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
142 views

Forum Mybb

The document provides CSS code for a Facebook login button. It instructs to add the "fb-login" class to the MyFacebook Connect link and includes PHP code for the link. It then provides CSS code to style the button with a Facebook icon, blue gradient background and borders, box shadow, and font formatting. Hover and active states are also styled.

Uploaded by

Cleverson Jose Godinho
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 1

A grainy pixely image or an untrustworthy looking link aren't really ideal

solutions for me, so ...

[Image: wDi62Ht.png]

I made this CSS button which you can use as you see fit. It requires Font-Awesome
to generate the FB icon.

First, append the class fb-login to the MyFacebook Connect link.

PHP Code:
<a href="{$mybb->settings['bburl']}/myfbconnect.php?action=fblogin" class="fb-
login"><i class="icon-facebook"></i><span>{$lang->myfbconnect_login}</span></a>

Then, add the following to your global.css:

Code:
a.fb-login {
color: #fff !important;
padding: 5px 0;
border: 1px solid;
border-color: #29447E #29447E #1A356E;
background-color: #5B74A8;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2;
-webkit-font-smoothing: antialiased;
font: bold 11px/normal 'lucida grande', tahoma, verdana, arial, sans-serif;
display: inline-block;
height: 25px;
box-sizing: border-box;
}

a.fb-login:active {
border-color: #29447E;
background: #4F6AA3;
filter: none;
box-shadow: none;
}

a.fb-login span {
display: inline-block;
position: relative;
top: -6px;
padding: 0 8px;
}

a.fb-login i {
padding: 3px 3px 0px 15px;
display: inline;
margin-left: -5px;
border-right: 1px solid #29447E;
margin-top: 0px;
font-size: 20px;
position: relative;
top: -2px;
}
World Beyblade Organization

You might also like