Однажды один мой товарищ попросил сделать для одного его проекта кнопку удаления, которая содержала бы внутри себя подтверждение. Т.е. как это сделано обычно? Нажимаешь удалить - выскакивает окно с вопросом "Вы уверены, что ходите удалить то-то и то-то?" - нажимаешь "Да", после чего удаляется то, что надо. Так вот, он хотел чтобы нажимаешь "Удалить", внутри кнопки меняется текст на "Вы уверены?", нажимаешь еще раз и происходит удаление.

Идея показалась мне интересной, и я решил поделиться способом простой реализации.

HTML

<a href="delete.html?id=2" target="_blank" onclick="return confirmDelete(this);" class="delete-link need-to-confirm">
    <span class="maintext">✘ Delete</span>
    <span class="confirmation">✔ Sure?</span>
</a>

Это наша кнопка-ссылка, которая куда-то ведет. На нажатие подвешен javascript-обработчик. У ссылки два класса delete-link и need-to-confirm. Внутри ссылки два элемента с текстом. Первый отображается с самого начала, второй становится виден после однократного нажатия.

CSS

.delete-link {
    display: inline-block;
    padding: 3px 5px;
    border: 1px solid red;
    background-color: #edbaba;
    color: red;
    text-decoration: none;
}
.delete-link:hover {
    background-color: #fff;
}
.need-to-confirm .confirmation {
    display: none;
}
.confirmed .maintext {
    display: none;
}

JavaScript

var confirmDelete = (function (element) {
    var className = element.className;
if (className.indexOf('need-to-confirm') > -1) {
    element.className = className.replace('need-to-confirm', 'confirmed');
    return false;
} else {
    element.remove();
}
});

А вот и функция. В нее передается элемент, на который происходит нажатие, функция проверяет какой класс в данный момент у ссылки, если need-to-confirm, значит пользователя нужно спросить "Уверен ли он?", в противном случае что-то сделать. В моем примере открывается новая вкладка по адресу указанному в ссылке и кнопка "Удалить" исчезает. Но легко можно добавить какой-нибудь Ajax запрос или еще что-то.

Вот пример работы.