WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Botão Gradiente CSS
953
securearray494
Abrir no Editor
Publique Seu Código
Recomendado
13 November 2024
Efeito de moldura em imagens usando CSS puro
28 January 2025
botão
8 February 2025
botão passar o mouse
HTML
Copy
Button
CSS
Copy
body{ display:flex; align-items:center; justify-content:center; height:100vh } button { display: flex; align-items: center; justify-content: center; padding: 20px; min-width: 140px; max-width: 100%; border: 0; border-radius: 8px; background-image: linear-gradient(144deg, #4caf50, #2196f3 50%, #ff9800); color: #fff; font-size: 18px; line-height: 1; box-shadow: rgba(0, 0, 0, 0.2) 0 10px 20px -5px; cursor: pointer; transition: transform 0.3s, background-color 0.3s; user-select: none; white-space: nowrap; box-sizing: border-box; touch-action: manipulation; } button:hover { background-image: linear-gradient(144deg, #81c784, #64b5f6 50%, #ffcc
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */