CSS Button Generator

Button CSS

display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border: none; background: #2563eb; color: #ffffff; font-size: 15px; font-weight: 600; padding: 10px 20px; border-radius: 8px; transition: all 200ms ease; text-decoration: none; line-height: 1.25; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.08);

:hover CSS

.btn:hover { color: #ffffff; background: #1d4ed8; transform: translateY(-1px); box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15); }

Full CSS rule

.btn { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border: none; background: #2563eb; color: #ffffff; font-size: 15px; font-weight: 600; padding: 10px 20px; border-radius: 8px; transition: all 200ms ease; text-decoration: none; line-height: 1.25; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.08); } .btn:hover { color: #ffffff; background: #1d4ed8; transform: translateY(-1px); box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15); }

HTML inline style

style="display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border: none; background: #2563eb; color: #ffffff; font-size: 15px; font-weight: 600; padding: 10px 20px; border-radius: 8px; transition: all 200ms ease; text-decoration: none; line-height: 1.25; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.08)"

Tailwind classes

inline-flex items-center justify-center cursor-pointer border-none text-[15px] font-[600] px-[20px] py-[10px] rounded-[8px] text-[\#ffffff] transition-all duration-200 bg-[\#2563eb] shadow-[0px_1px_2px_0px_rgba(0,_0,_0,_0.08)] hover:text-[\#ffffff] hover:bg-[\#1d4ed8]