Thread: Cool Social Buttons [Css+Html]

Page 1 of 2 12 LastLast
Results 1 to 10 of 15
  1. #1 Cool Social Buttons [Css+Html] [Now With V2] 
    Banned

    Join Date
    Apr 2013
    Posts
    1,464
    Thanks given
    341
    Thanks received
    148
    Rep Power
    0
    Difficulty 1/10 [Easy]

    description
    This is a tutorial about making
    some cool social buttons using Css+Html.
    Thanks

    [Only registered and activated users can see links. ]


    STEP: 1 The CSS

    First go into your stylesheet and add this code
    Code:
    
         .sharing-cl{
          overflow:hidden;
          margin:0;
          padding:0;
          list-style:none;
        }
        .sharing-cl a{
          overflow:hidden;
          width:75px;
          height:30px;
          float:left;
          margin-right:5px;
          text-indent:-200px;
          background:url("/images/share-sprite.png") no-repeat;
        }
        a.sh-Youtube{background-position:-214px -40px;}
        a.sh-Twitter{background-position:-61px -40px;}
        a.sh-Rss{background-position:-143px -40px;}
        a.sh-Facebook{background-position:20px -40px;}
    
    
        a.sh-Youtube:hover{background-position:-214px 1px;}
        a.sh-Twitter:hover{background-position:-61px 1px;}
        a.sh-Rss:hover{background-position:-143px 1px;}
        a.sh-Facebook:hover{background-position:20px 1px;}
     
        #text{
          margin-top:3em;
          font-weight:bold;
          font-family:helvetica,arial,sans-serif;
        }
        #text a{
          text-indent:0;
          height:auto;
          text-align:center;
          font-size:11px;
          padding-top:35px;
          color:#999;
          text-decoration:none;
        }
    STEP: 2 The Html
    Now for the html under your body tags go to where you want the buttons and add this html code

    Code:
    <ul class="sharing-cl" id="text"> 
        <li></li> 
        <li><a class="sh-Facebook" href="">Facebook</a></li>
        <li><a class="sh-Twitter" href="">Twitter</a></li> 
        <li><a class="sh-Rss" href="">  Rss Feed</a></li> 
        <li></li> 
        <li><a class="sh-Youtube" href="">Youtube</a></li> 
    </ul>



    Now go and get [Only registered and activated users can see links. ]image and add it into your images
    folder

    Click [Only registered and activated users can see links. ]for the Package


    well done now you are done if u need help adding more buttons just ask plz tell me what i could improve what i could add on to it thanks :]


    Verison 2:

    Now i forgot about this for a bit and i found it when looking though my webhosting account so today i have updated it to have an effect so here we are so the only new code this this

    Code:
    -webkit-transition-property: background;
        -webkit-transition-duration: 0.5s;
        -webkit-transition-timing-function: ease
    So when you look iin your css it should look someting like this

    Code:
    	a.sh-Facebook{background-position:20px -40px; 	-webkit-transition-property: background;    -webkit-transition-duration: 0.5s;
        -webkit-transition-timing-function: ease; }
    Now you may want to make some new buttons so it is an hover effect but anyway go to the old demo and V2 Is there Thanks Very Much

    Reply With Quote  
     

  2. Thankful user:


  3. #2  
    Donator

    Join Date
    Nov 2011
    Age
    25
    Posts
    94
    Thanks given
    32
    Thanks received
    16
    Rep Power
    53
    Good effort. nice post.
    Reply With Quote  
     

  4. Thankful user:


  5. #3  
    Rune-Server Affiliate
    Hank's Avatar
    Join Date
    Aug 2010
    Posts
    3,945
    Thanks given
    1,549
    Thanks received
    1,746
    Rep Power
    2904
    It's clean, and a cool idea. Hope to see more from you in the future.
    Reply With Quote  
     

  6. #4  
    Banned

    Join Date
    Apr 2013
    Posts
    1,464
    Thanks given
    341
    Thanks received
    148
    Rep Power
    0
    Quote Originally Posted by blackout View Post
    It's clean, and a cool idea. Hope to see more from you in the future.
    Thanks i was thinking on adding tooltips to theam what do you think ?
    Reply With Quote  
     

  7. #5  
    Rune-Server Affiliate
    Hank's Avatar
    Join Date
    Aug 2010
    Posts
    3,945
    Thanks given
    1,549
    Thanks received
    1,746
    Rep Power
    2904
    Quote Originally Posted by TheIronDoorProject View Post
    Thanks i was thinking on adding tooltips to theam what do you think ?
    I think that'd be a grand idea for you to try. Support.
    Reply With Quote  
     

  8. #6  
    Banned

    Join Date
    Apr 2013
    Posts
    1,464
    Thanks given
    341
    Thanks received
    148
    Rep Power
    0
    Quote Originally Posted by blackout View Post
    I think that'd be a grand idea for you to try. Support.
    Ok Ill get working on it
    Reply With Quote  
     

  9. #7  
    Banned

    Join Date
    Apr 2013
    Posts
    1,464
    Thanks given
    341
    Thanks received
    148
    Rep Power
    0
    Quote Originally Posted by blackout View Post
    I think that'd be a grand idea for you to try. Support.
    so i made theam i just need some better grapics do you think you coud make something ?
    Reply With Quote  
     

  10. #8  
    Registered Member
    WH:II:DOW's Avatar
    Join Date
    Dec 2007
    Age
    29
    Posts
    2,020
    Thanks given
    143
    Thanks received
    870
    Rep Power
    3509
    looks like it's all glitchy and they don't show up properly like misalligned or something
    [Only registered and activated users can see links. ] - Little RSPS project, more a proof of concept.


    Reply With Quote  
     

  11. #9  
    Banned

    Join Date
    Apr 2013
    Posts
    1,464
    Thanks given
    341
    Thanks received
    148
    Rep Power
    0
    Quote Originally Posted by WH:II:DOW View Post
    looks like it's all glitchy and they don't show up properly like misalligned or something
    What Browser u useing ?
    Reply With Quote  
     

  12. #10  
    Registered Member
    WH:II:DOW's Avatar
    Join Date
    Dec 2007
    Age
    29
    Posts
    2,020
    Thanks given
    143
    Thanks received
    870
    Rep Power
    3509
    Quote Originally Posted by TheIronDoorProject View Post
    What Browser u useing ?
    chrome
    [Only registered and activated users can see links. ] - Little RSPS project, more a proof of concept.


    Reply With Quote  
     

Page 1 of 2 12 LastLast

Thread Information
Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Similar Threads

  1. Replies: 17
    Last Post: 10-13-2012, 05:16 AM
  2. Simply Button v2: Super Cool-Sexy Button for Your Website
    By JavaScriptBank in forum Website Development
    Replies: 0
    Last Post: 09-15-2010, 09:48 AM
  3. Html+Css error.
    By minutes in forum Help
    Replies: 5
    Last Post: 01-26-2010, 11:54 PM
  4. How to use a CSS with HTML
    By rebewlabs in forum Website Development
    Replies: 1
    Last Post: 10-24-2009, 11:18 PM
  5. a cool start button
    By Crysis in forum Tutorials
    Replies: 18
    Last Post: 12-22-2007, 10:01 PM
Posting Permissions
  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •