WordPress Hosting
Free Photos
WordPress Themes

Orange animated button

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>For tests // 28/12/11</title> <style type="text/css"> a {text-decoration:none;} .button { background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5d900), color-stop(100%,#f5b000)); background: -moz-linear-gradient(center top, #f5d900 0%, #f5b000 100%); -webkit-box-shadow: 0px 5px 0px 0px rgba(224, 126, 0, 1); -moz-box-shadow: 0px 5px 0px 0px rgba(224, 126, 0, 1); box-shadow: 0px 5px 0px 0px rgba(224, 126, 0, 1); -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; text-shadow: 1px 1px 0px #cb8700; padding: 10px 20px; display: inline-block; font-family: Lucida Grande; font-size: 14px; color: #ffffff; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; -ms-transition: all 0.3s linear; transition: all 0.3s linear; } .button:hover { background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f500), color-stop(100%,#f5b000)); background: -moz-linear-gradient(center top, #f5f500 0%, #f5b000 100%); -webkit-box-shadow: 0px 3px 0px 0px rgba(224, 126, 0, 1); -moz-box-shadow: 0px 3px 0px 0px rgba(224, 126, 0, 1); box-shadow: 0px 3px 0px 0px rgba(224, 126, 0, 1); -webkit-transform: translateY(2px); -moz-transform: translateY(2px); transform: translateY(2px); } .button:active { background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f500), color-stop(100%,#d69900)); background: -moz-linear-gradient(center top, #f5f500 0%, #d69900 100%); -webkit-box-shadow: 0px -5px 15px #ff7a05 inset, 0px 0px 0px 1px #deb200, 0px 0px 0px 1px #ffffff inset; -moz-box-shadow: 0px -5px 15px #ff7a05 inset, 0px 0px 0px 1px #deb200, 0px 0px 0px 1px #ffffff inset; box-shadow: 0px -5px 15px #ff7a05 inset, 0px 0px 0px 1px #deb200, 0px 0px 0px 1px #ffffff inset; } </style> </head> <body> <a class="button" href="#">Simple button</a> </body> </html>

Be the first to comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.