Results 1 to 4 of 4

Thread: How to customize this buttons?

  1. #1
    Join Date
    Sep 2007
    Posts
    172
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Thumbs up How to customize this buttons?

    Hello,

    I am trying to make a social buttons like Preview Here

    I am able to done 30% of it, but I don't know how to adjust the height of buttons and align the text next to icons properly!

    So far I have code this.

    HTML Code:
            <div class="post-head">
    			<!-- Twitter -->
    		      <a href="http://twitter.com/home?status=" title="Share on Twitter" target="_blank" type="button" class="btn btn-twitter"><i class="fa fa-twitter"></i>Share on Twitter</a>
     			<!-- Facebook -->
    			<a href="https://www.facebook.com/sharer/sharer.php?u=" title="Share on Facebook" target="_blank" class="btn btn-facebook"><i class="fa fa-facebook"></i>Share on Facebook</a>
    			<!-- Google+ -->
    			<a href="https://plus.google.com/share?url=" title="Share on Google+" target="_blank" class="btn btn-googleplus"><i class="fa fa-google-plus"></i>Share on Google+</a>
    			<!-- StumbleUpon -->
    			<a href="http://www.stumbleupon.com/submit?url=" title="Share on StumbleUpon" target="_blank" data-placement="top" class="btn btn-stumbleupon"><i class="fa fa-stumbleupon"></i> Stumbleupon</a>
            </div>
    HTML Code:
    .post-head{
    	font-size: 14px;
    	margin-bottom: 30px;
    }
    
    .btn-twitter {
        background: #00acee;
        border-radius: 0;
        color: #fff;
    }
    .btn-twitter:link, .btn-twitter:visited {
        color: #fff
    }
    .btn-twitter:active, .btn-twitter:hover {
        background: #0087bd;
        color: #fff
    }
    .btn-facebook {
    	background-color: #3b5998;
    	border-color: #3b5998;
    }
    .btn-facebook:link, .btn-facebook:visited {
        color: #fff
    }
    .btn-facebook:active, .btn-facebook:hover {
        background: #30477a;
        color: #fff
    }
    .btn-googleplus {
        background: #e93f2e;
        border-radius: 0;
        color: #fff
    }
    .btn-googleplus:link, .btn-googleplus:visited {
        color: #fff
    }
    .btn-googleplus:active, .btn-googleplus:hover {
        background: #ba3225;
        color: #fff
    }
    .btn-stumbleupon {
        background: #f74425;
        border-radius: 0;
        color: #fff
    }
    .btn-stumbleupon:link, .btn-stumbleupon:visited {
        color: #fff
    }
    .btn-stumbleupon:active, .btn-stumbleupon:hover {
        background: #c7371e;
        color: #fff
    }
    .btn-linkedin {
        background: #0e76a8;
        border-radius: 0;
        color: #fff
    }
    .btn-linkedin:link, .btn-linkedin:visited {
        color: #fff
    }
    .btn-linkedin:active, .btn-linkedin:hover {
        background: #0b6087;
        color: #fff
    }
    
    .fa {
    	margin-right: 8px;
    	display: inline-block;
    	font-size: 18px;
    	line-height: 1;
    	-webkit-font-smoothing: antialiased;
    	}
    .fa-sitename {
        // Add CSS here to target individual buttons
    }
    Any help will be highly appreciate (:

    Many Thanks,
    Bilal
    Last edited by bbilal; 12-10-2014 at 04:18 PM.

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    It will be easier to offer suggestions based on a live example, where we can make live edits in the browser's developer tools screen, against the actual icons/icon fonts that you're using.

    Please provide a link to your page.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  3. #3
    Join Date
    Sep 2007
    Posts
    172
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    Thank You Beverleyh!

    I have resolved this my own

    How to delete or closed this thread?

  4. #4
    Join Date
    Jan 2007
    Location
    Davenport, Iowa
    Posts
    2,287
    Thanks
    97
    Thanked 104 Times in 102 Posts

    Default

    better yet you can edit your first post then go to the advanced settings and mark this thread as resolved. If possible can you detail what you did to fix your problem so that others that come across this thread later with a similar problem can see how you were able to solve this problem?
    To choose the lesser of two evils is still to choose evil. My personal site

Similar Threads

  1. Customize img alt tag ?
    By Cheng in forum HTML
    Replies: 16
    Last Post: 05-05-2009, 11:04 AM
  2. Customize Menus
    By swchblade in forum Looking for such a script or service
    Replies: 4
    Last Post: 08-11-2008, 03:49 PM
  3. customize Error 404
    By chechu in forum Other
    Replies: 4
    Last Post: 11-02-2006, 05:12 AM
  4. customize Error 404
    By chechu in forum HTML
    Replies: 2
    Last Post: 10-30-2006, 11:08 AM
  5. Customize skin?
    By KB1 in forum Flash
    Replies: 4
    Last Post: 09-30-2006, 04:05 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •