Secret button on website [closed]

Question

Closed. This question is opinion-based. It is not currently accepting answers.

---

Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.

Closed 9 years ago.

Improve this question

I am looking for a way to implement a 'secret' button in a page. Of course, I could just use CSS to hide the element like this:

HTML

<div class="secretButton" onclick="secretFunction()"></div>

CSS

.secretButton {
    width: 100px;
    height: 100px;
    opacity: 0.5;
}

JS

function secretFunction() {
    alert("Secret Alert");
}

JSFIDDLE

But this could too easily be seen in a web inspector. What would be the best way to create a such 'secret' element, where security does not matter?

Perhaps loading an encrypted script containing the 'secret' function onclick()?

Note 1: jQuery can be used.

Answer 1

Although this is kinda opinion based, I like the question about what's a good approach to place an easter egg into a website. Don't be too serious about it :-)

Generate the button completely with JS like:

document.easterEggBtn = function() {
    button = $('<div/>');
    button.addClass('secretButton');
    button.on('click', 'easterEggFunction');
    // Add more attributes
    $('#buttonOuter').append(button);
}

Then use an online javascript obfuscator, and put that obfuscated code into your website.

Won't hide from any DOM inspector of course, but if someone only looks into the sourecode, he won't spot it right away.

Another way is to fake 'secret buttons': Put many hidden buttons into the code, so the visitor gets confused and doesn't know which of the 50 buttons is the real easter egg.