How To Create A CSS Animated Share Button

Every website now has social network share buttons on their site, if you don't have them then you really should do. They're a great way to give your visitors easy access to share your content with their friends and followers.

The thing with social network share buttons is that they all look the same on every website, you can take this two ways. It's either a good thing because people will recognise them and understand how to use them or it's a bad thing because now your website looks the same as every other website on the internet.

In this tutorial we are going to create a share button which uses CSS animation to display the links to share the current page on Facebook, Twitter, Google Plus and Pinterest.

First we are going to start off creating the HTML which will display some text such as Share This Page. Then when we hover over this text we want to use CSS animation to display the share buttons.

View the demo to see what we are going to create.




Pinterest is the newest big player in the social media world, they have quickly grown to several million users, in the last year the amount of users has grown more than 4,000% and it continues to rise. With the amount of regular users Pinterest now has you need to learn how to best use this to help your website.

Pinterest is a social network which shares images and videos to your followers. Just like other big social networks Pinterest has there own pin buttons where website owners can use to place on their site to make it easy for people to pin the images on the site.

Pinterest Pin Buttons

The Pinterest buttons can be placed anywhere on the site, most websites have placed these pin buttons at the start or end of an article with the other social network buttons. But Pinterest is not like the other social networks, if you tweet a page you are tweeting the entire article. If you pin a site you are pinning a specific image on the page. Read more...

In this tutorial we are going to look at how we can use CSS transitions to make it look like a button is 3D when you push it. For this we use the box-shadow property which starts off with a high value and when the visitors clicks the button we need to change the box shadow value to be lower making it look like the button is being pushed down.

To achieve this look we are going to use the CSS active selector which becomes active when the visitor clicks on the attached element.

CSS 3D Push Button Demo

View the demo to see the finished button.


Creating the Button

The HTML for this button is very simple as all the work is done by the CSS, all we have to do is create a link with a class of push_button.

<a href="#" class="push_button">
	Push Me


With buttons playing a major part in the call to actions of your website it is important for them to make an impact on your visitors. This can be done in a number of different ways in this tutorial we are going to look at some of the things you can do with CSS3 to make your call to action buttons stand out.

We are going to combine CSS box shadows, CSS border radius and CSS animation to create shiny buttons when the user scrolls over them.

Here is an example of what we are going to create.

Please view the demo to see what we are going to create. Hover over the buttons to see the CSS animation effects.


Before we get started in creating this I need to say that some of these techniques won't work on older browsers as we are going to use lots of CSS3 features. Read more...

In this tutorial we are going to style text boxes and buttons to create pretty search forms. We are going to create three forms which will match the image above.

The three styles are dark grey, light grey and a lighter grey just like the image below.

Search Boxes


Each of the search forms will have a textbox and a button which we can submit the search. Read more...

Pseudo classes are bolted on to selectors to specify a state or relation to the selector. They take the form of selector:pseudo class { property: value; }, simply with a colon in between the selector and the pseudo class.

Many CSS proposals are not supported by all browsers, but there are four pseudo classes that can be used safely when applied to links.

  • Link - This is the for the default link.
  • Visited - This Is the state you give to links which have already been visited.
  • Hover - This is the state when the mouse is over the link.
  • Active - This is the state you give when the visitor clicks on the link.

In this tutorial you will learn how you can use this Pseudo classes with CSS3 to create different states for your web buttons.


We are going to use the Link, Hover and active classes to give the button different styles depending on how the visitor is interacting with it.

The image below shows the different styles we are going to create.

CSS Web Button

Google Plus

Google+ is the latest social media trend to hit the internet, it is growing in users all the time and it is fast becoming a very engaging community. You will find that because you can share content with a comment with targeted people you will get more interaction with each article you share. Read more...

The current trend in web design is textures with vintage design. One of the main aspects of this design is the use of stitches in your design, this used to have to be done using an image but thanks to CSS3 and some inventive use of these features you can create a stitched look just by using CSS.

In this tutorial you will learn how you use CSS it create the stitched look on buttons for your site.

View the demo to see what we are going to create.



Scroll To The Top

Creating a good user experience on your website is very important to keep people on the page. The best way to create a good user experience is to make it easy for people to use, if your site is difficult to use it annoys people and they will move on.

For websites that have a lot of information on the page you will scroll far down the page to consume the information. Websites like Google+ who have infinite page scroll can be very annoying if you want to go back to the top of the page to click on a link there. You can either refresh the page or move the scroll bar all the way back to the top.

Websites with initiate scroll need something to make it easy to return to the top. This is done with a button which will scroll them back to the top.

In this tutorial you will learn how you can create an animated scroll to top button with jQuery.

Demo

Feedback Box

Demo Download

You may have seen this before on many sites but it's a feature which I like and I have been asked how you would implement this feature.

In this article I am going to show you how you would create a slideout feedback form which using AJAX will send an email to your website admin email address with the feedback from the visitor.

A slideout form is a good place to ask for feedback from the visitor because it's hidden from view so it doesn't spoil the look of the site and people how click on the button will actually want to give you feedback.

In this tutorial we will be using both jQuery and PHP. We are will use jQuery for the slideout effect on the on-click event of the feedback button and then this will be sent to a PHP page on the server to submit the feedback to an admin email. With this tutorial just being about feedback we will only be asking the visitor to provide us with a message in the form, you will find that if people don't have to give a name or email address you will get more people submitting the form, which is want to want most from feedback. Read more...