Button Preview

Generated CSS

.custom-button { padding: 0.75rem 1.5rem; border-radius: 0.5rem; background: #165DFF; color: white; font-weight: 500; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); transition: all 0.3s ease; }  .custom-button:hover { background: rgba(22, 93, 255, 0.9); transform: translateY(-2px); }  .custom-button:focus { outline: none; box-shadow: 0 0 0 4px rgba(22, 93, 255, 0.3), 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }  .custom-button:active { transform: translateY(0); }

Button Properties

Popular Presets

Related Tools

Less to CSS Converter

Transform your Less code into CSS. Fast, easy, and secure.

Stylus to CSS Converter

Transform your SCSS code into CSS. Fast, easy, and secure.

CSS Beautifier

Format and beautify your CSS code with professional precision

CSS Scrollbar Generator

Customize Your Website's Scrollbars with Ease

Decimal to Hex

Convert decimal numbers to hexadecimal effortlessly

Time Unit Converter

Convert between different units of time with precision for your scientific, engineering, and everyday needs