Здесь вы увидите долгое описание того, как я создавал эту небольшую кнопку. Будет множество пояснений для новичков, которые могут показаться вам бесполезными. Но как показывает практика, даже верстальщики с опытом в 1 год, не знают многих базовых вещей. П.с. в связи с тем, что Яндекс.дзен автоматически применяет хёштеги, формат записи цвета будет в rgb. Листай в самый низ, если скучно (там код) =) Голый HTML Для начала зададим фону приятный цвет, который будет гармонично смотреться с кнопкой и эффектом наведения...

Создаем кнопки с эффектом наведения и фокусировки. Наведите курсор мыши на кнопку, чтобы увидеть эффект при наведении, и сфокусироваться на кнопках, нажав Tab, чтобы увидеть эффект фокусировки. В основном, есть 4 простые кнопки, но когда вы наводите на них курсор, в кнопке появляется значок и цвет. В этом дизайне есть 4 разных вида кнопок для отображения разных журналов, таких как инфо, принято, предупреждение и закрыто...