Как задать :hover{ и :active { Для одной кнопки? - Вопросы по CSS

Прошу помощи!

Нашел на одном сайте коды для кнопок, понравилась одна, решил запилить.

Создал кнопку "добавить статью" в админке и вывел её в нужную позицию.

Указал ей css-класс "addbutton" в админке.

Открыл template.css

В самом низу прописал оформление для неё так:
.addbutton {
  color: white;
  text-decoration: none;
  padding: .8em 1em calc(.8em + 3px);
  border-radius: 3px;
  background: rgb(64,199,129);
  box-shadow: 0 -3px rgb(53,167,110) inset;
  transition: 0.2s;
  max-width: 50%; display: block; margin: 0 auto;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
  text-align: center;
}

Теперь я хочу задать ей свой цвет, когда наводишь на неё мышку.
Нашел в template.css общие параметры, которые за это отвечают:
.nav > li > a:hover,
.nav > li > a:focus {
   text-decoration: none;
   background-color: #EEF3FC;
}

Но они для всех кнопок! А мне нужно прописать свои и только для кнопки addbutton.

Ей нужно добавить это:
a.addbutton:hover { background: rgb(53, 167, 110);
}
a.addbutton:active {
  background: rgb(33,147,90);
  box-shadow: 0 3px rgb(33,147,90) inset;
}

Вопрос. Куда это прописывать??

Пытался в template.css прописывать такое:
a.addbutton:hover { background: rgb(53, 167, 110);
}
a.addbutton:active {
  background: rgb(33,147,90);
  box-shadow: 0 3px rgb(33,147,90) inset;
}
Не помогло.Скорее всего это неправильно, поправьте меня.

Шаблон protostar.
Кнопка тут (http://shpargalkablog.ru/2012/04/css-knopki.html) Зелёная.

В общем, вроде разобрался) Нужно в CSS вот так добавлять:

.nav> li > a.addbutton:hover {
       background: rgb(53, 167, 110);
       color: white;
}
.nav> li > a.addbutton:active {
       background: rgb(33,147,90);
       box-shadow: 0 3px rgb(33,147,90) inset;
}

Эти строчки должны быть ниже в коде, чем глобально для всех кнопок, тогда будет переопределяться и работать.