Горизонтальные линии за кнопками HTML / CSS

Question

Я переделываю интранет своей школы для оценки, и я столкнулся с проблемой с кнопками.Как вы можете видеть на изображении, в промежутках между ссылками кнопок видна горизонтальная линия.

image

Существует ли какая-либо причина, по которой это происходит?Я добавил код CSS и HTML для раздела кнопок на веб-сайте, если это поможет.

CSS:

.button {
    background-color:rgba(255, 255, 255, 0.5);
    border:none;
    width:auto;
    height:auto;
    border-radius:3px;
    color:#ffffff;
    font-size:16px;
    cursor:pointer;
    padding:15px;
    z-index:3;
}

.button:hover {
    color:#000000;
    transition:.2s;
    background-color:rgba(255, 255, 255, 0.8);
    padding-left:18px;
    padding-right:18px;
}

.button:active {
    color:#000000;
}

.button:focus {
    outline-color:gold;
}

HTML:

<div class="links">

    <h2>Links</h2>

        <a href="http://jhclibrary.weebly.com/" alt="JHC Library Website">
            <button class="button">
                Library Website
            </button>
        </a>

        <a href="http://jhclibrary.weebly.com/research.html" alt="Research">
            <button class="button">
                Research
            </button>
        </a>

        <a href="http://jameshargestcollege.wheelers.co/" alt="eBooks">
            <button class="button">
                eBooks
            </button>
        </a>

        <a href="10.0.0.7" alt="Library Catalogue">
            <button class="button">
                Library Catalogue
            </button>
        </a>

        <br><br>

        <a href="http://studentintranet/Documents/SubjectBooklets/ElLink.html" alt="Subject Booklets">
            <button class="button">
                Subject Booklets
            </button>
        </a>

        <a href="http://studentintranet/Documents/Options/ElLink.html" alt="Option Books">
            <button class="button">
                Option Books
            </button>
        </a>



    </div>

Любая помощь приветствуется.Спасибо!

Answer 1

Строка является продолжением тега <a> из кода кнопки.Изменение их свойства display с inline (по умолчанию) на inline-block должно решить проблему.

.links a {
  display: inline-block;
}

Answer 2

Move <a> тег внутри <button> тег

    <div class="links">

    <h2>Links</h2>

    <button class="button">
        <a href="http://jhclibrary.weebly.com/" alt="JHC Library Website">
        Library Website
        </a>
    </button>

    <button class="button">
        <a href="http://jhclibrary.weebly.com/research.html" alt="Research">                    Research
        </a>
    </button>

    <button class="button">
        <a href="http://jameshargestcollege.wheelers.co/" alt="eBooks">
                eBooks
        </a>
    </button>

    <button class="button">
        <a href="10.0.0.7" alt="Library Catalogue">
                Library Catalogue
                </a>
    </button>

    <br>
    <br>

    <button class="button"> <a href="http://studentintranet/Documents/SubjectBooklets/ElLink.html" alt="Subject Booklets">

                Subject Booklets

        </a>
    </button>

    <button class="button">
        <a href="http://studentintranet/Documents/Options/ElLink.html" alt="Option Books">Option Books

        </a>
    </button>

</div>

JSFiddle