Widget:Gurren

<style>

 .social-card {
   display: block;
   width: 95%;                        /* um pouco menor que a coluna */
   margin: 0.5em auto;                /* centraliza e dá espaçamento */
   border-radius: 0.75em;
   overflow: hidden;
   position: relative;
   cursor: pointer;
   transition: transform 0.2s ease, box-shadow 0.2s ease;
   background: url('https://i.imgur.com/3ON2kVj.gif') center/cover no-repeat;
 }
 .social-card::before {
   content: "";
   position: absolute;
   inset: 0;
   /* overlay com a cor do Discord */
   background-color: rgba(114, 137, 218, 0.6);
   mix-blend-mode: multiply;
   pointer-events: none;
 }
 .social-card:hover {
   transform: translateY(-2px);
   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
 }
 .social-card-content {
   position: relative; /* acima do overlay */
   display: flex;
   align-items: center;
   padding: 0.75em 1em;
   color: #fff;
 }
 .social-icon {
   width: 2em;
   height: 2em;
   margin-right: 0.75em;
 }
 .social-name {
   font-size: 1.2em;
   font-weight: bold;
 }

</style>

<a

 href="https://discord.gg/SEULINK"
 class="social-card"
 target="_blank"
 rel="noopener"

>

   <img
     src="https://cdn.simpleicons.org/Discord/ffffff"
     alt="Discord"
     class="social-icon"
   />
   Discord

</a>