Corepress 主题美化友链模块

1. 友链申请按钮美化

美化 css 如下：

/* 按钮美化 */
.friend-links-apply {
    padding: 5px 10px;
    color: white !important;
    text-decoration: none;
    border-radius: 50px;
    background: linear-gradient(to right, #fd0808, #df05ed);
    background-size: 200% auto;
    animation: flowingGradient 3s ease-in-out infinite;
    opacity: 1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    filter: brightness(130%);
}

.friend-links-apply:hover {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
}

@keyframes flowingGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.friend-links .list-plane-title > div {
    /* 修复对齐效果 */
    line-height: 30px;
}

.fa-paper-plane:hover {
    color:red;
}

2. 友链鼠标悬浮效果

当鼠标放友链上时，呈现放大效果。

/* 友链a标签放大效果 */
.friend-links-list a:hover {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
}

3. 多行友情链接时添加空隙

如果友情链接不止一行时，会显得很紧凑，可以适当添加个 margin-bottom。

/** 友情链接多行时显示过于紧凑 **/
.friend-links-list {
   padding: 10px 10px 10px 15px !important;
}

.friend-links-list a {
   margin-bottom: 10px;
}

文章转自阿蛮君博客