大家好，每天分享做站经验，今天分享一个比较好看的文章标签效果：

这个效果比较好，可以自己利用下。

以下是html代码和CSS样式代码分享：

HTML：

 <div class="tags"> 

       {eyou:tag sort='now' getall='0' row='10'}

<a href="{$field.link}" target="_blank" title="{$field.tag}">{$field.tag}</a>

{/eyou:tag}

       </div>

CSS：

.tags {

    margin: 40px 0 10px 0;

}

.tags a {

    background-color: #f8f9fa;

    border-radius: 3px;

    font-size: 14px;

    padding: 4px 8px;

    margin: 0 10px 0 0;

    position: relative;

    width: 100px;

    height: 60px;

    text-align: center;

    line-height: 60px;

    margin: 10px;

    text-decoration: none;

    color: aqua;

    padding: 0 20px;

    text-transform: uppercase;

    transition: 0.5s;

    overflow: hidden;

    -webkit-box-reflect: below 1px linear-gradient(transparent, #1113);

}

        .tags a::before {

            content: '';

            position: absolute;

            top: 0;

            left: 0;

            width: 15px;

            height: 15px;

            border-top: 2px solid aqua;

            border-left: 2px solid aqua;

            transition: 0.5s;

            transition-delay: 0.5s;

        }

       .tags a::after {

            content: '';

            position: absolute;

            bottom: 0;

            right: 0;

            width: 15px;

            height: 15px;

            border-bottom: 2px solid aqua;

            border-right: 2px solid aqua;

            transition: 0.5s;

            transition-delay: 0.5s;

        }

       .tags a:hover::before, a:hover::after {

            width: 100%;

            height: 100%;

            transition-delay: 0s;

        }

       .tags a:hover {

            background-color: aqua;

            color: #000;

            box-shadow: 0 0 50px #21ebff;

            transition-delay: 0.3s;

        }

       .tags a:nth-child(1) {

            filter: hue-rotate(150deg);

        }

       .tags a:nth-child(3) {

            filter: hue-rotate(270deg);

        }

       .tags a:nth-child(4) {

            filter: hue-rotate(400deg);

        }

       .tags a:nth-child(5) {

            filter: hue-rotate(70deg);

        }