为 Corepress 主题友链模块赋予美感

友链申请按钮美化

对于友链模块而言，其中一个非常重要的方面就是友链申请部分。在这一部分中，应该让别人在看到的时候就能够直观地感觉到那个按钮是可以点击的。为什么要做到这一点呢？因为只有当访客明确地知道按钮是可点击的状态时，他们才更有可能去进行友链申请的操作，从而增加网站之间的互动和联系。这些 CSS 代码就像是一位神奇的魔法师，能够将原本普通的友链申请按钮变得更加引人注目和具有吸引力。通过精心调整颜色、字体、大小以及边框等属性，这些 CSS 代码能够让按钮呈现出一种专业而又友好的外观，让访客在看到的瞬间就产生一种想要点击的冲动。同时，这些 CSS 代码也能够与整个 Corepress 主题的风格相融合，使得友链模块在整个网站中显得更加和谐统一。而我的美化 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;
}