CSS可访问性：关注定制问题

Question

我正在尝试自定义：我的网站的焦点，所以我可以保持可访问性的首要任务，但使其成为主题。我已经对所有应该是的东西进行了反馈，并且我添加了我认为应该做我想要的代码，但它仍然只是给了我自然的蓝色发光轮廓而不是我缓和的粉红色发光轮廓。我在这里做错了什么？

a:focus, a:hover {
  outline: none;
  box-shadow: 0 0 5px rgba(255, 0, 255, 1);
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid rgba(255, 0, 255, 1);
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

编辑：这是html中的链接元素（在评论中添加）

<div tabindex="1" class="buttonpressed">Home</div>
<a href="intro.html">
  <div tabindex="2" class="button buttonlinks">Introduction</div>
</a>