CSS Buttons

Discussion in 'HTML & Website Design' started by BrandonRoberts, Aug 24, 2013.

  1. #1
    Okay guys. Ive got a new site coming up and need help with one thing at the moment. http://www.techpseudo.com is the site. I have CSS's the two social icons with rollover effect but I cant figure out how in the world to make them links. Any help would be greatly appreciated! Thanks :)
     
    BrandonRoberts, Aug 24, 2013 IP
  2. Apokalupsis

    Apokalupsis Greenhorn

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #2
    I only see the home page saying it is under construction, so I don't know what you've tried to do with the css.

    Anyway, a CSS button is just a css styled link. The "a href" is all html of course. So you just style the link itself or the button id or button class.

    something like:

    
    <div id="fb"> <a href="http://www.facebook.com">Facebook</a>
    </div>
    
    Code (markup):
    and

    
    #fb {
        background-color: #1A3841;
        margin-right: 10px;
        float: left;
        border:2px solid;
        border-radius:25px;
    }
    #fb a {
        text-decoration: none;
        font-size: 1.2em;
        color: #FBFEF6;
        display:block;
        padding: 5px 10px 5px 10px;
    }
    #fb a:hover, #fb a:active {
        color: #FBFEF6;
        background-color: #687F70;
        border:2px solid;
        border-radius:25px;
    }
    
    Code (markup):
    http://jsfiddle.net/Apokalupsis/M7DWc/1/

    --------

    If you already have the css that makes the image change when hovered, it's already styled. You are done with the css. You just need to use the html to get it to link.
     
    Apokalupsis, Aug 24, 2013 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #3
    As Apokalupsis said, hard to say without seeing the ACTUAL page (hopefully it's not as inaccessible a MESS as that 'under construction' placeholder).

    Are you ACTUALLY using CSS for the hover? On what Element? Do you even HAVE an anchor (the first element that should have been inserted) -- are you using a image replacement technique? Are you using the incorrectly named "CSS Sprites" or are you using multiple separate images? Are you using images at all? Is your hover state opacity based instead of image-swap? Have you done something stupid and pointless like using javascript to handle the swap?

    There's a LOT of questions we'd need answered before even ATTEMPTING to point you the right direction.
     
    deathshadow, Aug 25, 2013 IP
  4. dwirch

    dwirch Well-Known Member

    Messages:
    239
    Likes Received:
    12
    Best Answers:
    1
    Trophy Points:
    135
    #4
    This is how I would attack styling links as buttons. Just reference the class in the link. This is from memory, so try it and tweak as needed.

    <ahref="http://MyLinkHere.com" class="superbutton">TextToDisplay</a>
    HTML:
    and here is the CSS to back it up:

    .supbutt
    {
        -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
        -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
        box-shadow:inset 0px 1px 0px 0px #ffffff;
        background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
        background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
        background-color:#ededed;
        -moz-border-radius:6px;
        -webkit-border-radius:6px;
        border-radius:6px;
        border:1px solid #c0c0c0;
        display:inline-block;
        color:#000;
        font-family:arial;
        font-size:15px;
        font-weight:bold;
        padding:6px 24px;
        text-decoration:none;
        text-shadow:1px 1px 0px #ffffff;
    }
    .supbutt:hover
    {
        background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
        background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
        background-color:#dfdfdf;
    }
    .supbutt:active
    {
        position:relative;
        top:1px;
    }
    Code (markup):
     
    dwirch, Aug 25, 2013 IP
  5. goldenprince000

    goldenprince000 Well-Known Member

    Messages:
    173
    Likes Received:
    2
    Best Answers:
    1
    Trophy Points:
    115
    #5
    i inspected your elements and came to know that your site is using # in a href tag.
    <a class="facebook" href="#"></a>
    <a class="twitter" href="#"></a>
    <a class="reddit" href="#"></a>

    replace the # with the link in your index page.
    You can find the code here:
    <body>
            <div class="container">
                <div class="header">
                    <div id="logo"></div>
                    <div id="social_icons">
                        <a class="facebook" href="#"></a>
                        <a class="twitter" href="#"></a>
                        <a class="reddit" href="#"></a>
                    </div>
    HTML:
     
    goldenprince000, Aug 29, 2013 IP
  6. Farooq Maahir

    Farooq Maahir Member

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    31
    #6
    Use Css Linear Gradient Buttons
    [​IMG]
    <body>
    
    <input type=”Button” id=”bt1″ value=”Button 1″>
    <input type=”Button” id=”bt1″ value=”Button 1″>
    <input type=”Button” id=”bt1″ value=”Button 1″>
    <br>
    <input type=”Button” id=”bt2″ value=”Button 2″>
    <input type=”Button” id=”bt2″ value=”Button 2″>
    <input type=”Button” id=”bt2″ value=”Button 2″>
    <br>
    <input type=”Button” id=”bt3″ value=”Button 3″>
    <input type=”Button” id=”bt3″ value=”Button 3″>
    <input type=”Button” id=”bt3″ value=”Button 3″>
    <br>
    <input type=”Button” id=”bt4″ value=”Button 4″>
    <input type=”Button” id=”bt4″ value=”Button 4″>
    <input type=”Button” id=”bt4″ value=”Button 4″>
    <br>
    <input type=”Button” id=”bt5″ value=”Button 5″>
    <input type=”Button” id=”bt5″ value=”Button 5″>
    <input type=”Button” id=”bt5″ value=”Button 5″>
    
    </body>
    
    */
    
    second step of Create 3D Gradients Buttons
    
        copy this code
        paste it in head tag
    
    /*
    
    <style>
    body{
    background:#eee;
    }
    #bt1,#bt2,#bt3,#bt4,#bt5{
    margin-top:5px;
    padding:10px;
    font-size:16px;
    border:none;
    opacity:0.9;
    }
    #bt1{
    background:linear-gradient(90deg, #930, #960);
    background:-moz-linear-gradient(90deg, #930, #960);
    background:-webkit-linear-gradient(90deg, #930, #960);
    color:#fff;
    text-shadow:0px 3px 3px #000;
    }
    #bt2{
    background:linear-gradient(90deg, #063, #093);
    background:-moz-linear-gradient(90deg, #063, #093);
    background:-webkit-linear-gradient(90deg, #063, #093);
    color:#fff;
    text-shadow:0px 3px 3px #000;
    }
    #bt3{
    background:linear-gradient(90deg, #09F, #0CF);
    background:-moz-linear-gradient(90deg, #09F, #0CF);
    background:-webkit-linear-gradient(90deg, #09F, #0CF);
    color:#fff;
    }
    #bt4{
    background:linear-gradient(90deg, #333, #999);
    background:-moz-linear-gradient(90deg, #333, #999);
    background:-webkit-linear-gradient(90deg, #333, #999);
    color:#fff;
    }
    #bt5{
    background:linear-gradient(90deg, #F60, #F90);
    background:-moz-linear-gradient(90deg, #F60, #F90);
    background:-webkit-linear-gradient(90deg, #F60, #F90);
    color:#fff;
    text-shadow:0px 0px 4px #f00;
    }
    #bt1:hover,#bt2:hover,#bt3:hover,#bt4:hover,#bt5:hover{
    opacity:1;
    }
    </style>
    Code (markup):
     
    Farooq Maahir, Aug 8, 2015 IP
  7. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #7
    No. Just, no. Why in the world would he use BUTTON for this? It's a LINK, and those buttons do should be in a form-element to even work properly. Besides, a button doesn't do jack unless you have some way to catch the click on it, which means javascript.
     
    PoPSiCLe, Aug 9, 2015 IP
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #8
    Much less what's with the pointless bump of a two year old thread, and presentational use of classes?
     
    deathshadow, Aug 9, 2015 IP