TanmayTasks: colorbuttondemo.html

File colorbuttondemo.html, 1.8 KB (added by jdalbey, 6 years ago)

A demo of three colored buttons that can alternate being active.

Line 
1<!DOCTYPE html>
2<html>
3<style>
4button {
5    display: inline-block;
6    border: none;
7    padding: 1rem 2rem;
8    margin: 0;
9    text-decoration: none;
10    background: gray; 
11    color: #ffffff;
12    font-family: sans-serif;
13    font-size: 1rem;
14    cursor: pointer;
15    text-align: center;
16    transition: background 250ms ease-in-out, 
17                transform 150ms ease;
18    -webkit-appearance: none;
19    -moz-appearance: none;
20}
21
22button:hover,
23button:focus {
24    background: #0053ba;
25}
26
27button:focus {
28    outline: 1px solid #fff;
29    outline-offset: -4px;
30}
31
32button:active {
33    transform: scale(0.99);
34}
35</style>
36<body>
37
38<p id="p1">Hello World!</p>
39
40    <button id="redButton">Red</button>
41    <button id="greenButton">Green</button>
42    <button id="yellowButton">Yellow</button>
43   
44<script>
45
46    var redColor = document.getElementById('redButton');
47    var greenColor = document.getElementById('greenButton');
48    var yellowColor = document.getElementById('yellowButton');
49   
50    redColor.addEventListener('click', function() {
51        chosenColor = "red";
52        redColor.style.background = "red";
53        greenColor.style.background = "gray";
54        yellowColor.style.background = "gray";
55       
56    });
57    greenColor.addEventListener('click', function() {
58        chosenColor = "lime";
59        greenColor.style.background = "green";
60        redColor.style.background = "gray";
61        yellowColor.style.background = "gray";       
62    });
63    yellowColor.addEventListener('click', function(){
64        chosenColor = "yellow";
65        yellowColor.style.background = "yellow";
66        redColor.style.background = "gray";
67        greenColor.style.background = "gray";     
68    });
69    // set default button on
70    yellowColor.style.background = "yellow";   
71
72</script>
73
74
75</body>
76</html>
77