Click here to Skip to main content
15,558,870 members
Articles / Web Development / HTML5
Posted 14 Feb 2011


170 bookmarked

HTML5/CSS3 graphic enhancement: buttons, inputs

Rate me:
Please Sign up or sign in to vote.
4.86/5 (100 votes)
23 Feb 2015CPOL3 min read
Aesthetic enhancement of HTML5 web elements via pure CSS3; no image files required



The solution described in this article serves both practical and didactic purposes. This popular Electrical Engineering Calculator VOLTA demonstrates HTML5/CSS3 styling technique, which does not require any graphic files like .jpg or .png, etc. All aesthetic enhancements, like:

  • rounded corners
  • color gradients (in particular, color-stop property)
  • borders
  • shadows

are achieved exclusively via CSS3 styling, resulting in very small digital footprint and fast web page load. Following Demo and sample code snippets demonstrate aforementioned HTML5/CSS3 styling technique applied to the core elements of online calculator, i.e. input, button and div elements. The solution implements client-side jQuery scripting, making it rather universal, capable of running in off-line standalone mode (without Internet connectivity).

Demo screenshots

Following are sample screenshots of online Engineering Calculator utilizing aforementioned HTML5/CSS3 graphic enhancements (sample images pertain to the original VOLTA-2011 and subsequent versions including VOLTA-2013, etc.)

Image 1

Calculator VOLTA-2013, landscape layout adapted for 16:9 display aspect ratio


Image 2

Calculator VOLTA-2013, landscape layout, rounded corners achieved via CSS3 styling

Another screenshot corresponding to the "light" background (dynamically loaded CSS3) follows:


Image 3

Calculator VOLTA with "light" background  CSS3 styling

Image 4

Adapted for smartphone, vertically extended version of the Electrical Engineering Calculator showing standard E-Series (E24)

Image 5

Engineering Calculator with dynamically extented panel showing additional engineering and scientific functions.

Aesthetic HTML5 Button elements

Note: All aesthetic enhancements are achieved via pure HTML5/CSS3 styling; project does not use any graphic/image files.

Listing 1. HTML 5 Button and Input elements styling via pure CSS (no graphical files)
    <title>AESTHETIC BUTTONS | HTML5, CSS3</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="Author" content="Alexander Bell" />
    <meta http-equiv="Copyright" content="2011 Alexander Bell" />
    <meta http-equiv="Expires" content="0" />
    <meta http-equiv="Cache-control" content="no-cache">
    <meta name="Robots" content="all" />
    <meta name="Distribution" content="global" />
    <meta name="Keywords" content="HTML5, CSS3, Buttons, CalculatorS " />
    <meta name="Description" content ="Aesthetic buttons with Gradient and Rounded Corners, HTML5, CSS3" />
   <style type="text/css">
        height: 60px;
        margin: 0px;
        padding: 0px;
        cursor: pointer;
        cursor: hand;
        font-family: Arial, Tahoma, Verdana, Calibri;
        font-size: 28pt;
        text-align: center;
        border: 2px solid #ababab;
        color: #dadada;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
    input:hover  { font-weight:bold;}
    input:active { border: 2px; }
        background: -moz-linear-gradient(top, #707070, #505050 48%, #bababa 50%, #303030 52%, #101010);
        background: -webkit-gradient(linear, center top, center bottom, from(#707070), color-stop(0.48, #505050), color-stop(0.5, #bababa ), color-stop(0.52, #303030), to(#101010));
        background: -moz-linear-gradient(top, #dadada, #505050 5%, #bababa 50%, #bababa 50%, #303030 52%, #101010);
        background: -webkit-gradient(linear, center top, center bottom, from(#707070), color-stop(0.48, #505050), color-stop(0.5, #bababa ), color-stop(0.52, #303030), to(#101010));
        background: -moz-linear-gradient(top, #dadada, #707070 5%, #515151 50%, #bababa 50%, #303030 52%, #101010);
        background: -webkit-gradient(linear, center top, center bottom, from(#707070), color-stop(0.48, #505050), color-stop(0.5, #bababa ), color-stop(0.52, #303030), to(#101010));
       background: -moz-linear-gradient(top, #f0f0f0, #bababa 10%, #cacaca 46%, #909090 48%, #dadada 52%, #cacaca 54%, #cacaca 90%, #ababab);
       background: -webkit-gradient(linear, center top, center bottom, from(#f0f0f0), color-stop(0.1, #bababa ), color-stop(0.46, #cacaca), color-stop(0.48, #909090), color-stop(0.52, #dadada ), color-stop(0.54, #cacaca), color-stop(0.90, #cacaca), to(#ababab));
        background: -moz-linear-gradient(top, #f0f0f0, #cacaca 48%, #707070 50%, #cacaca 52%, #fafafa);
        background: -webkit-gradient(linear, center top, center bottom, from(#f0f0f0), color-stop(0.48, #cacaca), color-stop(0.5, #707070 ), color-stop(0.52, #cacaca), to(#fafafa));
    .divClear { clear:both;}
    <input type ="button" button value="A" class="btnType1" />
    <input type ="button" button value="L" class="btnType1" />
    <input type ="button" button value="E" class="btnType1" />
    <input type ="button" button value="X" class="btnType1" />
    <input type ="button" button value="A" class="btnType1" />
    <input type ="button" button value="N" class="btnType1" />
    <input type ="button" button value="D" class="btnType1" />
    <input type ="button" button value="E" class="btnType1" />
    <input type ="button" button value="R" class="btnType1" />
    <div class="divClear"></div>
    <input type ="button" button value="B" class="btnType2" />
    <input type ="button" button value="E" class="btnType2" />
    <input type ="button" button value="L" class="btnType3" />
    <input type ="button" button value="L" class="btnType3" />
    <input type ="button" button value="2" class="btnType4" />
    <input type ="button" button value="0" class="btnType4" />
    <input type ="button" button value="1" class="btnType5" />
    <input type ="button" button value="1" class="btnType5" />
Design Notes

The box shadow effect could be achieved by using the following CSS code block shown in Listing 2:

Listing 2. Box Shadow effect using CSS
/* add shadows */
-moz-box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
-webkit-box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
box-shadow: 5px 5px 10px rgba(0,0,0,0.3);

Adding Tooltips. Further enhancement could be achieved by adding the context-sensitive help (a.k.a. Tooltips) to the buttons by using HTML elements "abbr" or "acronym". In this case no any Javascript is needed; the pop-up text will correspond to the title attribute of the abbr tag. Listing 3 demonstrates the sample implementation of this feature, pertinent to the Calculator Volta 2011

Listing 3
    <menu id="menu1" class="oscMenu">
        <a href="" title="Return to the front page">HOME</a>
    <li id="active">
        <a href="" title="Read Instruction online">INSTRUCTION</a>

Points of Interest

Browser compatibility 

Online Calculator Volta is compatible with all major Web Browsers that support HTML5, CSS3 and jQuery version(s) 2.0x

  • Mozilla FireFox v.23+
  • Google Chrome v.28+
  • Safari v.6+
  • IE9+
  • Opera v.15+

Desktop version

The first desktop version of the Engineering Calculator software was created as a contest submission via direct conversion tool (HTML5 into Windows application) provided by Intel Corporation during the Ultrabooks Application Innovation Contest (AIC 2012). It was placed at the Intel's online App store for some time.

Much better results were achieved by completely re-programming the app using Microsoft .NET framework (WPF/XAML/C#) in Visual Studio 2010.

Engineering Calculator VOLTA-814D

Demo screenshot: Calculator Volta-814D for Windows implements border-less WPF window with graphic enhancements via XAML, similar to the original online version utilizing HTML5/CSS3


  • Dec 2010: Scientific Calculator ZENO-5000 has been released (HTML5 web app)
  • Feb 2011: Online Electrical Engineering Calculator Volta-2011 has been released  (HTML5)
  • Mar 2012: Calculator VOLTA-2011 has been tested on newly released Apple iPad
  • Oct 2012: Calculator Volta-2013 submitted to AppInnovation contest (app submission winner)
  • Jan 2013: Calculator Volta-814D for Windows has been released
  • Apr 2013: Online Calculator VOLTA was tested on Azure platform  [7]


  1. Scientific Calculator ZENO-5000


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By
United States United States
Dr. Alexander Bell (aka DrABell) is a seasoned full-stack Software (Win/Web/Mobile) and Data Engineer. He holds PhD in Electrical and Computer Engineering, authored 37 inventions and published 100+ technical articles; currently focused on Microsoft Azure Cloud and Android Mobile development projects. Alex participated in App Innovation Contests (AIC 2102/2013) w/multiple winning submissions. Sample apps/publications:

  1. HTML5/CSS3 graphic enhancement: buttons, inputs
  2. HTML5 Tables Formatting: Alternate Rows, Color Gradients, Shadows
  3. Azure web app: Engineering Calculator VOLTMATTER
  4. Azure: NYC real-time bus tracking app
  5. Quiz Engine powered by Azure cloud
  6. 'enRoute': Real-time NY City Bus Tracking Web App
  7. Advanced CSS3 Styling of HTML5 SELECT Element
  8. Aggregate Product function extends SQL
  9. YouTube™ API for ASP.NET

Comments and Discussions

GeneralRe: You are welcome! My best - AB Pin
DrABELL5-Sep-11 18:50
DrABELL5-Sep-11 18:50 
GeneralReason for my vote of 5 Nice! Pin
Dr.Walt Fair, PE31-Aug-11 9:29
professionalDr.Walt Fair, PE31-Aug-11 9:29 
GeneralRe: Thanks! Pin
DrABELL31-Aug-11 17:14
DrABELL31-Aug-11 17:14 
GeneralReason for my vote of 5 THANK'S Pin
ashishkumar00827-Jun-11 18:38
ashishkumar00827-Jun-11 18:38 
GeneralRe: You are very welcome! Likewise, thanks for visiting and voti... Pin
DrABELL28-Jun-11 4:02
DrABELL28-Jun-11 4:02 
GeneralReason for my vote of 5 NICE... Pin
ashishkumar00825-Jun-11 12:08
ashishkumar00825-Jun-11 12:08 
GeneralRe: Thanks, Ashish! Pin
DrABELL25-Jun-11 13:36
DrABELL25-Jun-11 13:36 
Generalgreat. nice head on to html 5. Pin
AmitMangal4-May-11 1:50
AmitMangal4-May-11 1:50 
great. nice head on to html 5.
GeneralThanks a lot, Deeksha! Kind regards, AB Pin
DrABELL30-Apr-11 4:35
DrABELL30-Apr-11 4:35 
Generalnice my5. Pin
Monjurul Habib29-Apr-11 21:28
professionalMonjurul Habib29-Apr-11 21:28 
GeneralRe: Many Thanks! Pin
DrABELL30-Apr-11 4:24
DrABELL30-Apr-11 4:24 
GeneralOutstanding yet simple. Cool woork. Pin
ezekjh27-Apr-11 11:39
ezekjh27-Apr-11 11:39 
GeneralRe: Many thanks, folks! Best regards, Alex Pin
DrABELL27-Apr-11 16:16
DrABELL27-Apr-11 16:16 
GeneralGreat job.. Pin
Shahriar Iqbal Chowdhury/Galib27-Apr-11 11:03
professionalShahriar Iqbal Chowdhury/Galib27-Apr-11 11:03 
GeneralRe: Thanks! Pin
DrABELL27-Apr-11 11:15
DrABELL27-Apr-11 11:15 
GeneralReal nice work! Ultimate man! Pin
GPUToaster™21-Mar-11 20:53
GPUToaster™21-Mar-11 20:53 
GeneralRe: Thanks! Pin
DrABELL22-Mar-11 3:22
DrABELL22-Mar-11 3:22 
GeneralReason for my vote of 5 nice one Pin
Pranay Rana25-Feb-11 3:58
professionalPranay Rana25-Feb-11 3:58 
GeneralRe: Many thanks, Pranay! Pin
DrABELL25-Feb-11 4:44
DrABELL25-Feb-11 4:44 
GeneralReason for my vote of 5 nice :) Pin
Bryian Tan24-Feb-11 6:15
professionalBryian Tan24-Feb-11 6:15 
GeneralRe: Thanks, Bryian! :) Pin
DrABELL24-Feb-11 6:36
DrABELL24-Feb-11 6:36 
GeneralReason for my vote of 5 Wonderful!!! Pin
maq_rohit24-Feb-11 2:30
professionalmaq_rohit24-Feb-11 2:30 
GeneralRe: Thanks! :) Pin
DrABELL24-Feb-11 3:48
DrABELL24-Feb-11 3:48 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.