kessi-cpa Library logo (4.0 KB)

How to Make a Button using Div


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.



How To

1. Add HTML

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

2. Add CSS

  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;

  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) {
js for dialogbox (39 kb)
Author of this article:
Mahmoud Kessi, CPA, CGA
(204) 226-9576

Comments & Questions

Add New Comment or Question



Email Link

Link to be shared:



Copyright © 2016-2019 KESSITEK.