kessi-cpa Library logo (4.0 KB)

How to Make a Button using Div

Concept

The div tag is usually used to a group a number of html elements inside an html document; however a div is highly customisable and could be used for a variety of purposes.

In this tutorial, we will use a div to make a button. The main benefit for using a div instead of a button is that a div is displayed uniformly across most browsers and a button is not. A button is displayed in different shapes by different browsers, particularly mobile browsers.

Example

SUBMIT

How To

1. Add HTML

<div class="dvButton" onclick="submit()">SUBMIT</div>

2. Add CSS

.dvButton
{
  height: 40px;
  width: 140px;
  border: none;
  border-radius: 3px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  background-color: #009933;
  background-image: -webkit-linear-gradient(top,#00e64d,#009933);
  cursor: pointer;
  color: #fff;
  font-size: 16px;
  transition: 0.4s;
}

.dvButton:hover
{
  background-color: #00cc44;
  background-image: -webkit-linear-gradient(top,#1aff66,#00cc44);
}

3. Add JavaScript

<script type="text/javascript">
    function submit() {
        try {
            window.alert("You clicked the SUBMIT button");
        }
        catch (err) {
            window.alert(err.message);
        }
    }
</script>
js for dialogbox (39 kb)
Author of this article:
Mahmoud Kessi, CPA, CGA
mkessi@kessi-cpa.com
(204) 226-9576

Comments & Questions

Add New Comment or Question




Post

REPLY/COMMENT



Email Link


Link to be shared:

×

Confirmation

Copyright © 2016-2019 KESSITEK.