Animated CSS Button With Reaveling Animation

Today I am going to share with you animated CSS3 button with hover revealing animation. This is an animated CSS3 button that has animation.

The animation is that when you Mouse over or hover over this button then the two elements are revealed one is at the top of the button and one is at the bottom of this button.

This is a very beautiful button and supports all browsers. This button will work the same in all browsers because we have used browser prefixes in the CSS properties of this button.

Demo/Preview of Animated Css3 Button With Reaveling Animation:

This is the snapped preview of the Animated Css3 Button With Reaveling Animation.

As you know the HTML markup is compulsory for that so we should have some HTML markup first. Below is the HTML markup.

The HTML, CSS & Javascript code that are provided below can have some encoding errors so I recommend you to use codes from project files in case if there is any error with the working of the code.

HTML markup for Animated Css3 Button With Reaveling Animation :

<div class="muzammil"><a href="#">Download</a><p class="top">click to begin</p><p class="bottom">1.2MB .zip</p></div>

Attribute	Belongs to	Description
charset	<meta>, <script>	Specifies the character encoding
class	Global Attributes	Specifies one or more class names for an element (refers to a class in a style sheet)
content	<meta>	Gives the value associated with the http-equiv or name attribute
href	<a>, <area>, <base>, <link>	Specifies the URL of the page the link goes to
name	<button>, <fieldset>, <form>, <iframe>, <input>, <map>, <meta>, <object>, <output>, <param>, <select>, <textarea>	Specifies the name of the element
rel	<a>, <area>, <link>	Specifies the relationship between the current document and the linked document
width	<canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video>	Specifies the width of the element

This was simply our HTML market about 3 to 4 lines you can change the text according to your requirements and make this button in action.

You can use this HTML code where ever you want to insert this button in blogger posts or in WordPress posts it will work perfectly in both.

Without CSS this script (Animated Css3 Button With Reaveling Animation) will never look ideal. So here we are, and our HTML markup is ready now we have to customize our HTML and it can only be done using CSS.

So this is the CSS code that I have written and we will use this to customize Animated Css3 Button With Reaveling Animation you can copy it by clicking on the code and the code will be automatically copied to the clipboard.

CSS Code for Animated Css3 Button With Reaveling Animation :

.muzammil{width:200px;margin:150px auto}.muzammil a{display:block;height:50px;width:200px;color:white;font:17px/50px Helvetica, Verdana, sans-serif;text-decoration:none;text-align:center;text-transform:uppercase;background:#00b7ea;background:-moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3));background:-webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%);background:-o-linear-gradient(top, #00b7ea 0%,#009ec3 100%);background:-ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%);background:linear-gradient(top, #00b7ea 0%,#009ec3 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 )}.muzammil a, p{-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;-webkit-box-shadow:2px 2px 8px rgba(0,0,0,0.2);-moz-box-shadow:2px 2px 8px rgba(0,0,0,0.2);box-shadow:2px 2px 8px rgba(0,0,0,0.2)}p{background:#222;display:block;height:40px;width:180px;margin:-50px 0 0 10px;text-align:center;font:12px/45px Helvetica, Verdana, sans-serif;color:#fff;position:absolute;z-index:-1;-webkit-transition:margin 0.5s ease;-moz-transition:margin 0.5s ease;-o-transition:margin 0.5s ease;-ms-transition:margin 0.5s ease;transition:margin 0.5s ease}.muzammil:hover .bottom{margin:-10px 0 0 10px}.muzammil:hover .top{margin:-80px 0 0 10px;line-height:35px}.muzammil a:active{background:#00b7ea;background:-moz-linear-gradient(top,#00b7ea 36%, #009ec3 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3));background:-webkit-linear-gradient(top,#00b7ea 36%,#009ec3 100%);background:-o-linear-gradient(top,#00b7ea 36%,#009ec3 100%);background:-ms-linear-gradient(top,#00b7ea 36%,#009ec3 100%);background:linear-gradient(top,#00b7ea 36%,#009ec3 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 )}.muzammil:active .bottom{margin:-20px 0 0 10px}.muzammil:active .top{margin:-70px 0 0 10px}

In the CSS code you can see that I have used Browser prefixes (eg: -moz-, -o-, -webkit-, -ms-,) as I have told you at the beginning of this article to make this button work properly in all kind of browsers whether they support these CSS properties or not. Descriptions of these prefixes are given below.

These are some CSS selectors that are used in the above CSS code with their descriptions and example.

Selector	Example	Description
:active	a:active	Selects the active link
:hover	a:hover	Selects links on mouse over
-webkit-	-webkit-color:red;	This prefix is used to specify style for any element On Chrome & Safari Browsers the color of text will be red.
-o-	-o-color:blue;	This prefix is used to specify style for any element On Opera Browser the color of text will be blue.
-moz-	-moz-color:green;	This prefix is used to specify style for any element On Mozilla or Firefox Browser the color of text will be green.
-ms-	-ms-color:yellow;	This prefix is used to specify style for any element On Internet Explorer Browser the color of text will be yellow.

Ending:

So here we are, We have done and our project Animated Css3 Button With Reaveling Animation is ready now you can copy and combine all the codes provided above and combine them into a single html file and fun.

If the project files are not downloaded or if you face any error while downloading, you can simply leave your comment i will try to resolve the issue as soon as possible.

Download Project (Animated Css3 Button With Reaveling Animation) File :

Download

If you face any difficulty in downloading the project file leave your to comment below I will resolve that issue as soon as possible.

That's it we are done now if you want to download the project file download button is provided above you can download it from there our today's post and hair and if you want to post on this site you are welcome.

Here you can simply write your post and wrap it in a text file and simply send that post text file to my email ID I will review it and try to publish that post on my website.