user7196813 user7196813 - 13 days ago 7
CSS Question

How do i prevent the box from surrounding the next and prev buttons on my slideshow?

I have created my own slideshow buttons but when i click the button a box surrounds the button instead of the shape of the button. Is there anyway of changing this so that either the box goes around the button or just doesnt appear at all?

CSS Code:

.slideshow{
max-width: 650px;
position: relative;
margin: auto;
margin-top: 20px;
margin-bottom: 10px;
}
/* Next & previous buttons */
#btnSlPrev, #btnSlNxt {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 2px;
color: #F00;
background-color: #039;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 20px 20px 20px 20px;
}

#btnSlNxt{
right: 0;
}


HTML Code:

<div class = "slideshow">
<img id="slide" src="picture" width=288 height=209 alt="Image 1">
<button id="btnSlNxt" onclick="nextSlide()">Next</button>
<button id="btnSlPrev" onclick="prevSlide()">Previous</button>
<p id="slnum">Slide 1 of 3</p>

</div>


JavaScript:


var inum = 1;

function newSlide(inum)
{
var iname = "image name" + inum + ".jpg";
var newimg = document.getElementById("slide");
newimg.setAttribute("src", iname);
var slidenum = "Slide " + inum + " of 3";
document.getElementById("slnum").innerHTML = slidenum;
}

function nextSlide()
{
inum = inum + 1;
newSlide(inum);
document.getElementById("btnSlPrev").disabled = false;
if (inum == 3) {
document.getElementById("btnSlNxt").disabled = true;
}
}

function prevSlide()
{
inum = inum - 1;
newSlide(inum);
document.getElementById("btnSlNxt").disabled = false;
if (inum == 1) {
document.getElementById("btnSlPrev").disabled = true;
}
}
</script>

Answer

What you refer to occurs on some browsers only that have predefined styling (Chrome for example). Anyway here is a fix, use this globally for all your buttons in CSS:

button:focus{
    outline: none
}