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
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.
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.
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):
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:
Use Css Linear Gradient Buttons <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):
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.
Much less what's with the pointless bump of a two year old thread, and presentational use of classes?