Inspirational Button

A simple button that provides a random inspirational quote when pressed.

by Adam Howard

HTML

<p id="quote">Press the Button!<p>
<div id="button" onclick="changeQuote()">
    <div id="top">:D</div>
    <div id="side"></div>
</div>

CSS

*{font-family: Helvetica; -webkit-user-select: none; text-align: center;} div{-webkit-transition: 0.3s ease; position: relative;}
#top{width: 120px; height: 120px; background-color: #FF1919; margin: 100px auto 0 auto; cursor: pointer; border-radius: 50%; -webkit-transform: rotateX(45deg); color: white; font-size: 50px; font-weight: bold; text-shadow: 0px 3px #A0A0A0; line-height: 100px;} #button{cursor:hover;}
#button:hover > #top{-webkit-transform: rotateX(60deg); text-shadow: 0px 6px #A0A0A0; background-color: #FF3030;}
#button:active > #top{margin-top: 120px;}

#side{background-image: -webkit-linear-gradient(right, #FF3333 0%, #B80000 100%); width: 120px; height: 80px; z-index:-100; margin: -60px auto 0 auto; border-radius: 0 0 50% 50%;}
#button:hover > #side{-webkit-transform: rotateX(-25deg);}
#button:active > #side{margin-top: -60px; height: 60px;}

#quote{position: fixed; margin: -80px auto;
left: 0; right: 0;} p{line-height: 25px;}

JavaScript

var text = document.getElementById('quote');
var button = document.getElementById('button');

button.onmouseup = function(){
    var final = quotes[Math.floor(Math.random()*quotes.length)];
    text.innerHTML = final;
    text.style.color = getRandomColor();
};

function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

var quotes=[
    "Try not to become a man of success but a man of value.<br>–Albert Einstein",
    "Doubt whom you will, but never yourself.<br>–Christian Nestell Bovee",
    "Every artist was first an amateur.<br>–Ralph Waldo Emerson",
    "Experience is the child of thought, and thought is the child of action.<br>–Benjamin Disraeli",
    "I avoid looking forward or backward, and try to keep looking upward.<br>–Charlotte Brontë",
    "The secret of getting ahead is getting started.<br>–Mark Twain",
    "Act as if what you do makes a difference. It does.<br>–William James",
    "Mental attitude is more important than mental capacity.<br>–Walter Dill Scott",
    "Minds are like parachutes — they only function when open.<br>–Thomas Dewar",
    "Our attitude toward life determines life’s attitude towards us<br>–Earl Nightingale"
 , "Kites rise highest against the wind; not with it.<br>–Winston Churchill",
];