facebook twitter button using html and css for responsive UI

+1 vote
asked Aug 11, 2014 in Other by anonymous

I am implementing login functionality using social networks like facebook, twitter, google+ etc. I have seen some websites they have buttons like below image. I am really wondering, whether these button are created by setting the background image? If so, this buttons should be fixed width right? If I need to implement the same for responsive UI screens, should I use vector based image? or Should I change the background image dynamically? Is there any easy way to achieve this?

facebook-twitter-button

Share

1 Answer

+1 vote
answered Aug 11, 2014 by Aadhira (1,213 points)
selected Aug 11, 2014 by administrator
 
Best answer

You are partially right. Those buttons are using background images, but the whole button may not be with image. Only those facebook, google+ logo icons are images. Rest all regular text. You can achieve this by using some css tricks and some photoshop work. All you need to do is, create small png images that has only facebook and google+ logo may be with the size of 48x48 px. Either you can have separate image files or you can create a single file with both images. If you create a single file like below, then you can use the code below to achieve the same.

facebook-twitter-logo

#fbButton
{
    background: #3b5998 url(images/social-connect.png) no-repeat;
    background-size: auto 96px;
}

#twButton
{
    background: #26d1e7 url(images/social-connect.png) no-repeat 0 -48px;
    background-size: auto 96px;
}

.btn-text
{
    display: block;
    font-size: 1.1em;
    color: #fff;
    width: 100px;
    height: 48px;
    padding: 0px 0px 0px 50px;
    border-radius: 3px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

<button type="button" id="fbButton" class="btn btn-default btn-text">Facebook</button>
<button type="button" id="twButton" class="btn btn-default btn-text">Twitter</button>

Your answer

Preview

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.
Anti-spam verification:
To avoid this verification in future, please log in or register.
site design / logo / content © 2013 - 2015 pinfaq.com
...