BLOG POST: Advanced AI ButtonList Styling Tutorial

How to Build a Professional AI Button Dashboard (5 Styling Techniques)

In this tutorial, you will learn how to progressively enhance a clean ButtonList using five modern styling upgrades:

1. Modern Rounded Buttons with Gradient + Hover Effects
2. Responsive 2-Column Grid Layout
3. Adding Icons to Buttons
4. Creating a Compact Dashboard Style
5. Color-Coding by Provider

---

1️⃣ Modern Buttons with Gradient & Hover Effects

We start with a reusable button style. Add this CSS above your buttons:

<style>
.button-list {
  text-align:center;
  max-width:700px;
  margin:20px auto;
}

.link-btn {
  display:inline-block;
  padding:12px 20px;
  border-radius:30px;
  text-decoration:none;
  font-weight:600;
  color:#fff;
  background:linear-gradient(135deg,#4e73df,#1cc88a);
  transition:all 0.3s ease;
  box-shadow:0 4px 10px rgba(0,0,0,0.15);
}

.link-btn:hover {
  transform:translateY(-3px);
  box-shadow:0 6px 14px rgba(0,0,0,0.25);
}
</style>

Result: Smooth hover lift, rounded corners, modern gradient design.

---

2️⃣ Responsive 2-Column Grid Layout

Now let’s convert the list into a responsive grid:

<style>
.button-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:15px;
  max-width:800px;
  margin:30px auto;
}
</style>

Wrap your buttons like this:

<div class="button-grid">
  <a class="link-btn" href="https://chat.deepseek.com/sign_in" target="_blank">DeepSeek</a>
  <a class="link-btn" href="https://chat.qwen.ai/" target="_blank">Qwen Chat</a>
  <a class="link-btn" href="https://www.kimi.com/settings" target="_blank">Kimi Settings</a>
  <a class="link-btn" href="https://ernie.baidu.com/agent" target="_blank">ERNIE Agent</a>
</div>

Result: Automatically adapts to mobile and desktop screens.

---

3️⃣ Adding Icons to Buttons

Use simple emoji or inline SVG icons for clarity:

<a class="link-btn" href="https://chat.deepseek.com/sign_in" target="_blank">
  🤖 DeepSeek
</a>

<a class="link-btn" href="https://chat.qwen.ai/" target="_blank">
  💬 Qwen Chat
</a>

<a class="link-btn" href="https://www.kimi.com/deep-research" target="_blank">
  🔬 Kimi Research
</a>

Tip: Icons improve recognition speed and visual balance.

---

4️⃣ Compact “Dashboard Style” Layout

For a cleaner admin-panel look:

<style>
.dashboard {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:10px;
  max-width:900px;
  margin:30px auto;
}

.dashboard a {
  padding:10px 12px;
  border-radius:12px;
  font-size:14px;
}
</style>

This creates a tighter, productivity-style interface.

---

5️⃣ Color-Coding by Provider

Assign provider-specific classes:

<style>
.deepseek { background:#0f172a; }
.qwen { background:#7c3aed; }
.kimi { background:#16a34a; }
.ernie { background:#d97706; }
.tencent { background:#2563eb; }
.meta { background:#111827; }
</style>

Usage example:

<a class="link-btn deepseek" href="https://chat.deepseek.com/sign_in">DeepSeek</a>
<a class="link-btn qwen" href="https://chat.qwen.ai/">Qwen</a>
<a class="link-btn kimi" href="https://www.kimi.com/settings">Kimi</a>
<a class="link-btn ernie" href="https://ernie.baidu.com/agent">ERNIE</a>

Result: Clear brand separation and visual hierarchy.

---

🎯 Final Combined Example

<div class="dashboard">
  <a class="link-btn deepseek" href="https://chat.deepseek.com/sign_in">🤖 DeepSeek</a>
  <a class="link-btn qwen" href="https://chat.qwen.ai/">💬 Qwen</a>
  <a class="link-btn kimi" href="https://www.kimi.com/settings">⚙ Kimi</a>
  <a class="link-btn ernie" href="https://ernie.baidu.com/agent">📘 ERNIE</a>
  <a class="link-btn tencent" href="https://cloud.tencent.com/document/product/1729/104753">☁ Tencent</a>
  <a class="link-btn meta" href="https://www.meta.ai/@carrascal4132/post/ZJawVN1A8vZ/">🌐 Meta AI</a>
</div>

---

Conclusion

You now have a fully customizable AI Dashboard Button System:

• ✔ Modern gradients
• ✔ Hover animations
• ✔ Responsive grid
• ✔ Compact dashboard mode
• ✔ Brand color coding

You can combine these techniques to build a professional AI resource hub inside Blogger.