| Kosten | Вторник, 26 Ноября 2019, 00:19 | Сообщение 1 |
| Вашему вниманию концепция кнопок, что идут в 2 варианта, где мы изначально наблюдаем один оттенок цвета, но пари наведении она кардинально меняется. И где были написаны ключевые слова, там вот как раз становится светлый фон, что очень необычно, если рассматривать такою эффект на темной стилистике сайта. А так кнопки сделаны оригинально, плюс уникальный эффект, который по сути по стандарту идет, но все таки заметно, когда наводим на основу элемента курсором, где эффект преображает кнопку.
HTML
Код <a class='seukalasde' href='zornet.ru'>ZorNet.Ru</a> <a class='asukasdemug' href='zornet.ru/forum/'>ZorNet.Ru №1</a>
CSS
Код a.seukalasde {
margin-left : auto;
margin-right : auto;
width : 375px;
padding : 10px;
text-decoration :none;
font-size : 50px;
font-family : Helvetica;
font-weight : bold;
text-transform : uppercase;
display :block;
top : 50px;
position :relative;
border-radius : 10px;
text-align: center;
transition : all .15s ease-out;
color : rgba(255,255,255,1);
background : rgba(22,22,22,1);
box-shadow: inset 0px 0px 0px 10px rgba(22,22,22,1);
}
a.seukalasde:hover {
color : rgba(22,22,22,1);
background : rgba(255,255,255,1);
box-shadow: inset 0px 0px 0px 5px rgba(22,22,22,1);
}
/*=============second==========*/
a.seukalasde {
margin-left : auto;
margin-right : auto;
width : 375px;
padding : 10px;
text-decoration :none;
font-size : 50px;
font-family : Helvetica;
font-weight : bold;
text-transform : uppercase;
display :block;
top : 50px;
position :relative;
border-radius : 10px;
text-align: center;
transition : all .15s ease-out;
color: rgb(253, 251, 251);
background: rgb(37, 35, 35);
box-shadow: inset 0px 0px 0px 10px rgb(39, 36, 36);
}
a.seukalasde:hover {
color: rgb(33, 31, 31);
background: rgb(243, 237, 237);
box-shadow: inset 0px 0px 0px 5px rgb(41, 40, 40);
}
/*=============second==========*/
a.asukasdemug {
margin-top:30px;
margin-left : auto;
margin-right : auto;
width : 424px;
padding : 10px;
text-decoration :none;
font-size : 50px;
font-family : Helvetica;
font-weight : bold;
text-transform : uppercase;
display :block;
top : 50px;
position :relative;
border-radius : 10px;
text-align: center;
transition : all .15s ease-out;
color: rgb(251, 249, 249);
background: rgb(14, 179, 228);
box-shadow: inset 0px 0px 0px 10px rgb(16, 180, 228)
}
a.asukasdemug:hover {
color: rgb(19, 174, 220);
background: rgb(241, 237, 237);
box-shadow: inset 0px 0px 0px 5px rgb(10, 175, 224);
}
Для любого веб-сайта за частую акцент часто делается на более сдержанном дизайне, тогда как для креативных индустрий используются более привлекательные кнопки CSS
Демонстрация
| | Страна: (RU) |
| |
