Snap Builder Public Codes Library
Snap | Generators | Login | Browse | Search | Enter Code | Export Snap Builder Public Codes Library

 

Category: HTML5 Codes Library >> Buttons >> HTML5 CSS Rounded Button


Code Snippet </> Info


Snippet Name: HTML5 CSS Rounded Button

Description: Easily add stylish buttons to your web page.

Compatible Browsers:
Chrome BrowserFirefox BrowserInternet Explorer BrowserOpera BrowserSafari Browser


Example: View Code Demo

Note: Change color styles to your preferences.

Author: SnapBuilder <snippets@snapbuilder.com>

Last Modified: 2015-08-26 22:18:34

Language: html5

Highlight Mode: css

Copy Codes: Use Free Notepad ++
Bookmark and Share

Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor


  About Copying

<!DOCTYPE html> <head> <title>An HTML5 CSS Rounded Button Code Snippet</title> <style> /* Begin HTML5 CSS Rounded Button */ /* == This Script Free To Use Providing This Notice Remains == */ /* == This Script Has Been Found In The http://snapbuilder.com Free Public Codes Library == */ body { font-family:verdana,arial,ms sans serif; font-size:90%; text-shadow:0px 1px 0px rgba(0,0,0,0.4); } .myButton { -moz-box-shadow:inset 0px 1px 0px 0px #ffffff; -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff; box-shadow:inset 0px 1px 0px 0px #ffffff; background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #d1d1d1) ); background:-moz-linear-gradient( center top, #ffffff 5%, #d1d1d1 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d1d1d1'); background-color:#ffffff; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; border:1px solid #dcdcdc; display:inline-block; color:#777777; font-family:arial; font-size:15px; font-weight:bold; padding:6px 24px; text-decoration:none; text-shadow:1px 1px 0px #ffffff; }.myButton:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d1d1d1), color-stop(1, #ffffff) ); background:-moz-linear-gradient( center top, #d1d1d1 5%, #ffffff 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d1d1d1', endColorstr='#ffffff'); background-color:#d1d1d1; } .myButton:active { position:relative; top:1px; } </style> </head> <body> <h3>An HTML5 CSS Rounded Button Code Example:</h3> <p>Roll your cursor over the button to see the hover button effect.</p> <a href="http://snapbuilder.com" class="myButton" title="Visit SnapBuilder.com">My Button</a> <br /><br /> <div id="snippet"> [ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_125.html">HTML5 CSS Rounded Button</a> page. ] </div> </body> </html>


[ Snippet Options ]

 

© 2002 -  Snap Builder Public Codes Library