Wrapping the vote buttons in an outline like this makes them look more actionable, which is an environmental clue for users, especially new ones. (These are buttons, come press them!) This should make them easier to use and more obvious, which should lead to more engagement with them.
You say you want the vote buttons to look like buttons to provide a recognizable environmental clue for users? Well, then please consider the following modest proposal (interactive demo in the code snippet below):
const imgUpNot = 'https://i.sstatic.net/U6r0J.png';
const imgUpHot = 'https://i.sstatic.net/7joO5.png';
const imgUpHov = 'https://i.sstatic.net/TicRh.png';
const imgDnNot = 'https://i.sstatic.net/KZXuh.png';
const imgDnHot = 'https://i.sstatic.net/1sZHq.png';
const imgDnHov = 'https://i.sstatic.net/1voqE.png';
$('.js-vote-up-btn')
.click(function() {
const el = $('img.iconArrowUpLg');
el.attr('src', (el.attr('src') === imgUpHot) ? imgUpNot : imgUpHot);
$('img.iconArrowDownLg').attr('src', imgDnNot);
})
.mouseover(function() {
const el = $('img.iconArrowUpLg');
el.attr('src', (el.attr('src') === imgUpHot) ? imgUpHot : imgUpHov);
})
.mouseout(function() {
const el = $('img.iconArrowUpLg');
el.attr('src', (el.attr('src') === imgUpHot) ? imgUpHot : imgUpNot);
});
$('.js-vote-down-btn')
.click(function() {
const el = $('img.iconArrowDownLg');
el.attr('src', (el.attr('src') === imgDnHot) ? imgDnNot : imgDnHot);
$('img.iconArrowUpLg').attr('src', imgUpNot);
})
.mouseover(function() {
const el = $('img.iconArrowDownLg');
el.attr('src', (el.attr('src') === imgDnHot) ? imgDnHot : imgDnHov);
})
.mouseout(function() {
const el = $('img.iconArrowDownLg');
el.attr('src', (el.attr('src') === imgDnHot) ? imgDnHot : imgDnNot);
});
body, #content, #answers, .answer
{
margin: 0 !important;
padding: 0 !important;
border: none !important;
}
<html itemscope="" itemtype="https://schema.org/QAPage" class="html__responsive html__unpinned-leftnav" lang="en">
<body class="question-page unified-theme js-comments-menu-events">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://meta.stackoverflow.com/Content/Js/third-party/npm/@stackoverflow/stacks/dist/js/stacks.min.js?v=6cc27826a5fd"></script>
<script src="https://meta.stackoverflow.com/Content/Js/stub.en.js?v=e700279bb0cc"></script>
<link rel="stylesheet" type="text/css" href="https://meta.stackoverflow.com/Content/Shared/stacks.css?v=3bbf3c79def9">
<link rel="stylesheet" type="text/css" href="https://meta.stackoverflow.com/Content/Sites/stackoverflowmeta/primary.css?v=205802c9d683">
<div class="container">
<div id="content">
<div>
<div class="inner-content clearfix">
<div id="mainbar" role="main" aria-label="question and answers">
<div id="answers">
<div class="answer js-answer accepted-answer js-accepted-answer">
<div class="post-layout">
<div class="votecell post-layout--left">
<div class="js-voting-container d-flex jc-center fd-column ai-stretch gs4 fc-black-200">
<button class="js-vote-up-btn flex--item s-btn s-btn__unset c-pointer " data-controller="s-tooltip" data-s-tooltip-placement="right" aria-pressed="false" aria-label="Up vote" data-selected-classes="fc-theme-primary" data-unselected-classes="" aria-describedby=""
title="This answer is useful">
<img src="https://i.sstatic.net/U6r0J.png" class="svg-icon iconArrowUpLg" width="45" height="45">
</button>
<div class="js-vote-count flex--item d-flex fd-column ai-center fc-black-500 fs-title c-pointer" itemprop="upvoteCount" data-value="24" role="button" tabindex="0" data-s-tooltip-placement="right" data-controller="null s-tooltip" aria-describedby="" title="View upvote and downvote totals.">
42
</div>
<button class="js-vote-down-btn flex--item s-btn s-btn__unset c-pointer " data-controller="s-tooltip" data-s-tooltip-placement="right" aria-pressed="false" aria-label="Down vote" data-selected-classes="fc-theme-primary" data-unselected-classes="" aria-describedby=""
title="This answer is not useful">
<img src="https://i.sstatic.net/KZXuh.png" class="svg-icon iconArrowDownLg" width="45" height="45">
</button>
<div class="js-accepted-answer-indicator flex--item fc-green-500 py6 mtn8" data-s-tooltip-placement="right" tabindex="0" role="note" aria-label="Accepted" data-controller="null s-tooltip" aria-describedby="" title="The question owner accepted this as the best answer 17 hours ago.">
<div class="ta-center">
<svg aria-hidden="true" class="svg-icon iconCheckmarkLg" width="36" height="36" viewBox="0 0 36 36"><path d="m6 14 8 8L30 6v8L14 30l-8-8v-8Z"></path></svg>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>