Link in Bio Page CSS (Code Snippet)

<div class="bio-container">
  <img src="https://placehold.co/100x100/3b82f6/ffffff?text=U" alt="Profile" class="profile-pic">
  <h1>@Username</h1>
  <p>Digital Creator & Developer</p>
  <div class="links-list">
    <a href="#" class="bio-link">My Website</a>
    <a href="#" class="bio-link">Latest YouTube Video</a>
    <a href="#" class="bio-link">Buy me a Coffee</a>
    <a href="#" class="bio-link">Twitter / X</a>
  </div>
</div>

.bio-container {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  max-width: 400px;
  margin: 0 auto;
  padding: 40px 20px;
  text-align: center;
}
.profile-pic {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  margin-bottom: 15px;
  border: 3px solid #e5e7eb;
}
h1 {
  font-size: 1.25rem;
  margin: 0 0 5px;
  color: #1f2937;
}
p {
  color: #6b7280;
  margin: 0 0 30px;
}
.links-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.bio-link {
  display: block;
  padding: 14px;
  background: #fff;
  color: #1f2937;
  text-decoration: none;
  border: 1px solid #d1d5db;
  border-radius: 50px;
  font-weight: 600;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.bio-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  border-color: #1f2937;
}

Link in Bio Page CSS

Share Code Snippet