Monday, March 14, 2016

CSS Button Project

Sampili Tuition     6:42 AM     No comments


Animated Button

In this tutorial I will show you how to make an animated button using css and html.


The complete code is.

<!--DOCTYPE html--> <html> <head> <style> .button { display: inline-block; border-radius: 4px; background-color: #f4511e; border: none; color: #FFFFFF; text-align: center; font-size: 28px; padding: 20px; width: 200px; transition: all 0.5s; cursor: pointer; margin: 5px; } .button span { cursor: pointer; display: inline-block; position: relative; transition: 0.5s; } .button span:after { content: &#187;; position: absolute; opacity: 0; top: 0; right: -20px; transition: 0.5s; } .button:hover span { padding-right: 25px; } .button:hover span:after { opacity: 1; right: 0; } </style> </head> <body> <h2>Animated Button</h2> <button class="button" style="vertical-align:middle"><span>Hover </span></button> </body> </html>

0 comments :

Today is

Tutorials

Recommended

Find Us On Facebook

Company

Blender

Legal Stuff

FAQ's

Blogroll

Javascript

Subscribe to Newsletter

We'll never share your Email address.
Facebook Twitter RSS
© 2015 Sampili. Blogger Templates Designed by Bloggertheme9. Powered by Blogger.