x

Top 7 link and text effects using javascript/css


In this article I will run through my favourite ways of enhancing links and text on your website using Javascript and CSS. I don’t recommend the use of these all the time. Only on small website in certain scenarios are they appropriate due to slowing down the speed of your website and often many have accessibility issues. Having said that they are very cool and I hope your like them. If you have any others you would like to suggest please post a comment and I will add it to the list.

  1. Scrollovers

    scrollovers

    This was the first javascript linking effect I came across. I used to use it a lot on headings. Great little tool which makes your links flip over when you roll over them. Give it a try!

  2. Jquery/Mootools Link Nudging

    link nudging

    I only discovered this neat trick a couple of weeks ago on David Walsh’s website (fantastic source of information). When you hover over a link the link moves to the right by increasing the padding-left using javascript. Give it a try!

  3. Links With Icon Cues

    link cues

    This was the first javascript linking effect I came across. I used to use it a lot on headings. Great little tool which makes your links flip over when you roll over them. Give it a try!

  4. Menu Fading

    fading links

    I also just recently came across this effect. It can be very versatile and create some really wonderful effects. There is a great tutorial on CSS Tricks showing how to implement the effect. Give it a try!

  5. Javascript Text Replacement

    cufon

    This is an extremely powerful and useful tool. It gives you the ability to use non-standard fonts on your website without the use of flash or any images. A truly amazing piece of code. There are many different versions of this out there. I suggest checking out cufon because its so easy to set up. Give it a try!

  6. CSS Only Grunge Text

    grunge

    This is a pretty cool and simple effect. Basically you create a grunge PNG image. Then on your headers or the text you want to use simply position the PNG over the top. Trying reading the following link for the code to use it. Give it a try!

  7. CSS Only Gradient Text

    gradient text

    Another simple trick just link the grunge only text. This time you just create a 1px wide PNG and do the same effect. Webdesigner wall has a great article about it which will explain to completely along with multiple demos and example code. Give it a try!

Like this post?

If you liked this post and want to keep up-to-date with the website, please consider subscribing to our rss feed or following us on twitter.

Want to learn CSS fast?

Sick of reading tutorial after tutorial? Just want to learn CSS quickly and simply? Why not try lynda css screencast tutorials. You can learn everything you need to know about CSS in one place. The website is a great learning resource for all languages, CSS included. Why not check the website out for more details.

x

Related CSS Tutorials

  • CSS Poker Cards

    September 3, 2010 / No Comments

    Not really a tutorial but I developed some really simple cards. They are perfect for describing a poker hand or anything else involving cards. Check them out at the following link. Let me know if you encounter any problems or what to request anything.

    Read
  • jQuery Enhanced CSS Navigation

    July 4, 2010 / 3 Comments

    In this tutorial we will combine jQuery and CSS to create a nice tab style navigation. The basic effect we are creating is when you hover over a tab it raises up using jQuery.

    Read
  • 13 Awesome CSS and jQuery Navigations for Free

    February 13, 2010 / 17 Comments

    Today I have been experimenting with adding jQuery effects to navigations and links to create some pretty nice interfaces. I have written a brief description for each and include a download.

    Read

Comments

  1. Edward.H says:

    thanks, it is very useful tutorial ,I have submitted a link of this article to our website in order to share it with more people. check:

    http://www.webmasterclip.com/story/top-7-link-and-text-effects-using-javascriptcss

  2. admin says:

    Thanks for that Edward. Im glad you liked the article. You website looks great, I will be sure to check back on it.

  3. feng says:

    so good !

  4. salem says:

    i like it thanks

  5. Brenda says:

    Is it possible to add a link to the revealed image? I tried just adding the link before the code for the image – but then nothing worked. Love the effect, though! 🙂

  6. Couldn’t figure out why it wasn’t working either. Changed the facebox.js and now I got smile on my face. Thanks for posting this.

  7. tony says:

    hi im working with this example but it doesn´t work in my computer,
    after putting the information in the boxes i click in submit and appears

    \nReply-To: \””.ucwords($_POST[‘first_name’]).”\” \nX-Mailer: PHP/” . phpversion() ); } ?>

    in the bottom, what can i do??

    Thank you

  8. Dutchy says:

    This is very cool, however when I hit submit in chrome, the error message or confirmtion are opening in new page instead of in facebox. Any ideas?

    • n00dl3s says:

      Because you did not check / correct the paths to jquery.x.x.x-min.js and jquery.form.js in the head of index.php

      • Colin says:

        Fantastic tut, many thanks.
        I too am having an issue with the success or failure message showing in a new window in Safari(only).
        I see you suggest to check the paths to the relevant js files. These must be correct because it works in all the other browsers, please can you give me some ideas as what to change. Many thanks

        • Colin says:

          I have found out how to fix safari
          Never put and/or tags to the remote file (html, php)
          what contains the modal-form 🙂

  9. Milind says:

    It is really good and it worked for me too but is not model how can we make it model.
    I mean to say if click outside the area of Facebox DIV it will go disappear I need something like until I press close button or ESC key it should not go.

  10. niths says:

    this works great..I am using this contact form..But the thing is the mail at the receivers side is very ordinary.. so how can we make that in table with some background color…? can any one plzzz

  11. roxane says:

    this is really helpful!

  12. boon chye says:

    the email will be gererated again if the user can click the submit button. any method to resolve this? possible to disable the button once successfully sent or close the facebox?

Leave a Comment

Awake is an amazing wordpress theme with over 30 unique style variations. Its our star buy at only $42!

Wordpress Themes

Other Websites

CSS Books