Animated Css3 Button With Reaveling Animation
close
Animated Css3 Button With Reaveling Animation

Animated Css3 Button With Reaveling Animation

Animated Css3 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 which has an animation. The animation is that when you Mouse over for hover over this button then the two elements are revealed one is at the top of his button and one is at the bottom of this button.

This is very beautiful button and supports all browsers. This button will work 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 Animated Css3 Button With Reaveling Animation.
Animated Css3 Button With Reaveling Animation

How do you do buddy today we are going to create 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 used codes from project files in case if there is any error with the working of 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>

AttributeBelongs to Description
charset<meta>, <script>Specifies the character encoding
classGlobal AttributesSpecifies one or more classnames 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 perfect in both.
Without CSS our this script (Animated Css3 Button With Reaveling Animation) will never look ideal. So here we are, 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 which 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 code will be automatically copied to 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 Ie have used Browser prefixes (eg: -moz-, -o-, -webkit-, -ms-,) as I have told you in the beginning of this article to make this button work properly in all kind of browsers whether they support these CSS properties or not. Description of these prefixes are given below.

These are some css selectors that are used in the above css code with their description and example.
SelectorExampleExample description
:activea:activeSelects the active link
:hovera:hoverSelects 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 single html file and have 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 :

Animated Css3 Button With Reaveling Animation.zip
File Size 1.43 KB
Click the download button and you will be redirected to download page from where you can download project files.

If you face any difficulty in downloading the project file leave you 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 a text file to my email ID I will review and try to publish that post on my website.
Thank you !
Disqus Codes

No comments

Comments System WIDGET PACK

Notifications

Disqus Logo