Assignment02

Improve GUI with css

In order to improve the appearance of the buttons let us use the css.

In html file we should add after the <html> tag the following code:

<style>

    .button {

        background-color: #4CAF50;

        border: none;

        color: white;

        width:100%;

        padding: 15px 32px;

        text-align: center;

        font-size: 20px;

        margin: 4px 2px;

        cursor: pointer;

</style>

At the definition of the buttons the class .button should be added (class="button"):

<button id="buttonOn1" class="button" onClick="on1()">On 1</button>

<button id="buttonOff1" class="button" onClick="off1()">Off 1</button>

<button id="buttonOn2" class="button" onClick="on2()">On 2</button>

<button id="buttonOff2" class="button" onClick="off2()">Off 2</button>

The new buttons should look like:

Page updated

Google Sites

Report abuse