кнопки

Оформление кнопок HTML

кнопка

<a href="#" class="knopka01">кнопка</a>

А дальше экспериментируем со стилями

<style type="text/css">
a.knopka1 {
  background: rgba(172, 173, 125, 0.5);
  padding: 5px 7px;
  text-decoration: none;
  outline: none;
  color: #000;
  border-radius: 2px;
  border: 1px solid #878857;
  box-shadow: 0px 1px 1px #878857, inset 0px 0px 1px #dcdd89, inset 0px 1px 0 #dcdd89;
  text-shadow: 0px 1px 1px rgba(255,255,255,1);
} 

a.knopka1:hover { background: rgba(172, 173, 125, 1); } 

a.knopka1:active {
  box-shadow: 0px 1px 1px #fff, inset 0px 1px 0px #878857, inset 0px 0px 1px #878857;} 
</style>

<a href="#" class="knopka1">кнопка</a>

кнопка

Чтобы добавить к кнопке картинку или спец.символы, можно применить псевдоэлементы

<style type="text/css">
a.knopka1:after {
  content: " \2613";
}

a.knopka1:hover:after {
  content: " \2713";
}

a.knopka1:active:after, a.knopka1:visited:after, a.knopka1:focus:after {
  content: " \2714";
}
</style>

кнопка

Многие любят градиенты

<style type="text/css">
a.knopka1 {
  background-image: -moz-linear-gradient(#a9a57f, #827e55);
  background-image: -ms-linear-gradient(#a9a57f, #827e55);
  background-image: -o-linear-gradient(#a9a57f, #827e55);
  background-image: -webkit-linear-gradient(#a9a57f, #827e55); 
} 

a.knopka1:hover {
  background: -moz-radial-gradient(#fff, #827e55);
  background: -ms-radial-gradient(#fff, #827e55);
  background: -o-radial-gradient(#fff, #827e55);
  background: -webkit-radial-gradient(#fff, #827e55);
}
</style>

кнопка

Часто вижу вариант с чёткой границей посередине

<style type="text/css">
a.knopka1 {
  background-image: -moz-linear-gradient(#cbc8ad 0%, #c1be9d 50%, #8f8b63 50%, #827e55);
  background-image: -ms-linear-gradient(#cbc8ad 0%, #c1be9d 50%, #8f8b63 50%, #827e55);
  background-image: -o-linear-gradient(#cbc8ad 0%, #c1be9d 50%, #8f8b63 50%, #827e55);
  background-image: -webkit-linear-gradient(#cbc8ad 0%, #c1be9d 50%, #8f8b63 50%, #827e55); 
} 
</style>

кнопка

Не обязательно сразу иметь вид кнопки

<style type="text/css">
a.knopka3 {
  padding: 7px 10px;
  text-decoration: none;
  outline: none;
  border-radius: 2px;
} 

a.knopka3:hover { 
  box-shadow: rgba(255,255,255,.2) 0px 1px 1px, inset rgba(0,0,0,.5) 0 1px 4px;
  background: -moz-linear-gradient(rgba(0,0,0,.1), rgba(0,0,0,0) 30%, rgba(0,0,0,.2));
  background: -ms-linear-gradient(rgba(0,0,0,.1), rgba(0,0,0,0) 30%, rgba(0,0,0,.2));
  background: -o-linear-gradient(rgba(0,0,0,.1), rgba(0,0,0,0) 30%, rgba(0,0,0,.2));
  background: -webkit-linear-gradient(rgba(0,0,0,.1), rgba(0,0,0,0) 30%, rgba(0,0,0,.2));
} 

a.knopka3:active {background: rgba(0,0,0,.3);} 
</style>

<a href="#" class="knopka3">кнопка</a>

кнопка

Второй вариант CSS кнопки

Воспользуемся position: relative

<style type="text/css">
a.knopka2 {
  color: #fff; font-weight: bold;
  background: rgba(172, 173, 125, 1);
  padding: 5px 7px;
  text-decoration: none;
  outline: none;
  border-radius: 5px;
  box-shadow: 1px 3px 0px #555231, 2px 4px 1px rgba(0, 0, 0, 0.3);
  text-shadow: 0 -1px 0 #595206;
} 

a.knopka2:hover {background: #9a955e;} 

a.knopka2:active {
  top: 2px; left: 1px; position: relative;
  box-shadow: 0px 1px 0px #555231;} 
</style>

<a href="#" class="knopka2">кнопка</a>

кнопка

Анимированная кнопка CSS

Добавим анимацию с постоянным изменением фона

<style type="text/css">
a.knopka3 {
  background: #fff;
  padding: 5px 7px;
  text-decoration: none; outline: none;
  color: #666;
  border: 1px solid #DDD;
  border-radius: 3px;
  -moz-animation: animaciya 3s infinite alternate;
  -webkit-animation: animaciya 3s infinite alternate;
  -ms-animation: animaciya 3s infinite alternate;
} 

a.knopka3:hover {
  -webkit-animation-play-state:paused;   
  -moz-animation-play-state:paused;
  -ms-animation-play-state:paused;
} 

@-moz-keyframes animaciya {   
  from {background: #fff;}  
  to {background: #acad7d; border: 1px solid #878857; color: #fff;} 
}

@-webkit-keyframes animaciya {
  from {background: #fff;}  
  to {background: #acad7d; border: 1px solid #878857; color: #fff;} 
}

@-ms-keyframes animaciya {
  from {background: #fff;}  
  to {background: #acad7d; border: 1px solid #878857; color: #fff;} 
}

a.knopka3:active {
   border: 1px solid #AAA;
   border-bottom-color: #CCC;
   border-top-color: #999;
   box-shadow: inset 0 1px 2px #aaa;
} 
</style>

<a href="#" class="knopka3">кнопка</a>

кнопка

Круглые CSS кнопки

<style type="text/css">
a.krug {
  position: relative;
  display: inline-block;
  height: 50px; width: 50px; line-height: 50px;
  text-align:  center;
  text-decoration: none;
  outline: none;
  background: #cecbb7; 
  box-shadow: inset 0 1px 0 #747161, 0 1px 0 #fff;
  color: #4f3f0d;
  border-radius: 100%;
}

a.krug:after {
  content: "";
  position: absolute;
  top: 3px; right: 3px; bottom: 3px; left: 3px; 
  box-shadow: inset 0 1px 0 #fff; 
  border: 1px solid #959055;
  border-radius: 100%;
}

a.krug:active:after {
  box-shadow: 0px 1px 1px #fff;
}
</style>

<a href="#" class="krug">ВКЛ</a>

ВКЛ

<style type="text/css">
a.krug1 { text-indent: 0px;
  display: inline-block;
  height: 40px; width: 40px; line-height: 40px;
  text-align:  center;
  text-decoration: none;
  outline: none;
  color: #4f3f0d;
  border-radius: 100%;
  box-shadow: inset 0px 2px 0 #fff, inset 0px 0px 1px #fff, 0px 1px 0 #93835c;
  border: 1px solid #b09f79;
}

a.krug1:hover {
  background: -moz-linear-gradient(rgba(246, 236, 192, 1), rgba(236, 226, 202, 1));
  background: -ms-linear-gradient(rgba(246, 236, 192, 1), rgba(236, 226, 202, 1));
  background: -o-linear-gradient(rgba(246, 236, 192, 1), rgba(236, 226, 202, 1));
  background: -webkit-linear-gradient(rgba(246, 236, 192, 1), rgba(236, 226, 202, 1)); 
}

a.krug1:active {
  box-shadow: inset 0px 0 1px #fff, 0px 1px 0 #fff;
}
</style>

<a href="#" class="krug1">вкл</a>

вкл

Выпуклая кнопка HTML

выпуклая кнопка

Объёмная кнопка CSS

объёмная кнопка