Заміна кнопки submit в формі html

мета:
Сьогодні наше завдання заміна стандартної кнопки "відправити" на красиву. Кнопка виконує відправку форми і має тип «submit». Можна звичайно змінити тип з «submit» на «image» і додати параметр «src», але наше завдання на сьогодні це залишити тип «submit» на місці і програмно намалювати красиву кнопку.

застосування:
Для чого це може знадобитися? Все просто, для додання естетичного вигляду тієї самої кнопці.
Ось для порівняння. Наочно видно, що друга кнопка виглядає краще.

Рішення:
Для виконання даної мети як і говорилося ми будемо застосовувати «input» з типом «submit». Ще нам знадобиться описати новий клас в таблиці стилів «* .css»
Ось код для html-файлу:

superbutton width: 150px;
height: 40px;
border-radius: 20px;
background: # 459DE5;
color: #fff;
font-size: 18px;
cursor: pointer;
>

прикрашаємо:
Для прикраси можна запропонувати змінювати колір фону кнопки при наведенні. Як правило дизайнери радять міняти колір не кардинально, а всього лише на тон світліше або темніше. Я при виконанні завдання вважав за краще затемнити кнопку. Для цього в css додаємо:

Тепер кнопка ожила. На статичної зображенні різниця кольорів не так помітна коли ти наводиш миша і колір в тугіше секунду змінюється накладаючи більш темний відтінок.

Проблема рамки навколо кнопки:
І все начебто нічого і виглядає нічого і при наведенні темніє, але при натисканні ми бачимо жахливу рамку. Ще цю рамку можна спостерігати якщо наша кнопка знаходиться у фокусі, в тому який по кнопці Tab перебирає елементи на сторінці.
Для цього ми пропишемо в css ще 2 псевдо класу, як і «hover». Це класи «active» який відповідає за вид при натисканні на кнопку і клас «focus» при фокусі на кнопці. Але є одна особливість, так як у нас input і присвоєний йому клас, то active прописувати не обов'язково.
Ось код: