Web: Моя первая CSS3 кнопка
2 минут
Теперь буду выкладывать свою CSS графику. Это серая кнопка, с градиентом, под все браузеры.
Пример работы🔗︎
HTML код🔗︎
<button class="zgshell">Пример</button>
<a class="zgshell">Кнопка</a>
CSS код🔗︎
.zgshell {
padding: 7px 15px;
border: 1px solid #aaa;
background: #888;
background: -webkit-linear-gradient(top, #888, #666);
background: -moz-linear-gradient(top, #888, #666);
background: -ms-linear-gradient(top, #888, #666);
background: -o-linear-gradient(top, #888, #666);
background: linear-gradient(top, #888, #666);
margin: 0;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
-moz-border-radius: 5px;
-ie-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
color:#fff;
text-align: center;
text-shadow: 0 -1px 0 #555;
font-weight: bold;
font-size:13px;
cursor: pointer;
outline: none;
text-decoration: none;
}
.zgshell:hover {
background: #777;
background: -webkit-linear-gradient(top, #888, #777);
background: -moz-linear-gradient(top, #888, #777);
background: -ms-linear-gradient(top, #888, #777);
background: -o-linear-gradient(top, #888, #777);
background: linear-gradient(top, #888, #777);
}
.zgshell:active {
background: #666;
background: -webkit-linear-gradient(top, #666, #888);
background: -moz-linear-gradient(top, #666, #888);
background: -ms-linear-gradient(top, #666, #888);
background: -o-linear-gradient(top, #666, #888);
background: linear-gradient(top, #666, #888);
}