Botao-Destaque-913627
Botão HTML CSS Botão /* Pack.Orbbt.CSS */ .botao-destaque-913627 { font-size: 18px; letter-spacing: 2px; text-transform: uppercase; display: inline-block; text-align: center; font-weight: bold; padding: 0.7em 2em; border: 3px solid #FF0072; /* Cor da borda */ border-radius: 2px; /* Bordas arredondadas */ position: relative; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, […]
Botao-Espaco-Animado-582639
ESPAÇO HTML CSS ESPAÇO /* Pack.Orbbt.CSS */ .box-582639 { –clr-shadow__border: #d9a1ff; –clr-text: #F6F4EB; –clr-space: #120e1e; –clr-space-gr: #271950; –clr-star: #E9F8F9; –size: 3rem; position: relative; outline: 1px solid var(–clr-shadow__border); } .botao-582639 { font-weight: 600; font-size: 1.5rem; letter-spacing: 0.2rem; background: transparent; padding: calc(var(–size) / 3) var(–size); border: none; cursor: pointer; color: var(–clr-text); text-shadow: 2px 0px var(–clr-shadow__border), 0px 2px […]
Botao-Gradiente-Animado
Código HTML CSS Código /* Pack.Orbbt.CSS */ .botao-gradiente-animado { position: relative; font-family: inherit; font-weight: 500; font-size: 18px; letter-spacing: 0.05em; border-radius: 0.8em; /* Bordas arredondadas */ cursor: pointer; border: none; background: linear-gradient(to right, #8e2de2, #4a00e0); /* Fundo gradiente */ color: ghostwhite; /* Cor do texto */ overflow: hidden; /* Evita conteúdo extra fora do botão */ […]
Botao-Anatomia
Icon Anatomia Preenchimentoesquerdo Preenchimento direito Background Raio da Borda HTML CSS Icon Anatomia Preenchimentoesquerdo Preenchimento direito Background Raio da Borda /* Pack.Orbbt.CSS */ .button { cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 14px; background-image: linear-gradient(#3470fa, #313ed7); color: white; border: solid 2px #0618db; height: 50px; padding: 0px 20px; border-radius: 5px; font-weight: 600; […]
Botao-Anel-Animado
Botão HTML CSS Botão /* Pack.Orbbt.CSS */ .botao-animado { all: unset; display: flex; align-items: center; /* Centraliza verticalmente */ justify-content: center; /* Centraliza horizontalmente */ position: relative; padding: 0.6em 2em; border: mediumspringgreen solid 0.15em; /* Cor da borda */ border-radius: 0.25em; /* Bordas arredondadas */ color: mediumspringgreen; /* Cor inicial do texto */ font-size: 1.5em; […]
Botao-Cadastro-Seta
Cadastrar HTML CSS Cadastrar /* Pack.Orbbt.CSS */ .botao-cadastro { –primary-color: #645bff; /* Cor primária do botão */ –secondary-color: #fff; /* Cor do texto e da seta */ –hover-color: #111; /* Cor ao passar o mouse */ –arrow-width: 10px; /* Largura da seta */ –arrow-stroke: 2px; /* Espessura da seta */ box-sizing: border-box; border: 0; border-radius: […]
Botao-Bordas-Animado
BOTÃO HTML CSS BOTÃO /* Pack.Orbbt.CSS */ .botao-primario { font-family: ‘Ropa Sans’, sans-serif; color: white; cursor: pointer; font-size: 13px; font-weight: bold; letter-spacing: 0.05rem; border: 1px solid #0E1822; padding: 0.8rem 2.1rem; background-image: url(“data:image/svg+xml,%3Csvg xmlns=’http://www.w3.org/2000/svg’ viewBox=’0 0 531.28 200’%3E%3Cdefs%3E%3Cstyle%3E .shape %7B fill: %23FF4655 %7D %3C/style%3E%3C/defs%3E%3Cg id=’Layer_2′ data-name=’Layer 2’%3E%3Cg id=’Layer_1-2′ data-name=’Layer 1’%3E%3Cpolygon class=’shape’ points=’415.81 200 0 200 115.47 […]
Botao-Ctrl-Gradiente
Ctrl HTML CSS Ctrl /* Pack.Orbbt.CSS */ .botao-ctrl-gradiente { –cor-texto-tecla: #969faf; –sombra-tecla: inset 0 -2px 0 0 #cdcde6, inset 0 0 1px 1px #fff, 0 1px 2px 1px rgba(30, 35, 90, 0.4); –gradiente-tecla: linear-gradient(-225deg, #d5dbe4, #f8f8f8); border: none; background: var(–gradiente-tecla); /* Fundo em gradiente */ border-radius: 3px; /* Bordas arredondadas */ box-shadow: var(–sombra-tecla); /* Sombra […]
Botao-Gradiente-Animado
Participe agora HTML CSS Participe agora /* Pack.Orbbt.CSS */ .botao-animado-gradiente { –width: 150px; /* Largura do botão */ –timing: 2s; /* Duração da animação */ border: 0; width: var(–width); padding-block: 1em; color: #fff; /* Cor do texto */ font-weight: bold; font-size: 1em; background: rgb(64, 192, 87); /* Cor de fundo inicial */ transition: all 0.2s; […]
Botao-Icone-Clique
Clique aqui HTML CSS Clique aqui /* Pack.Orbbt.CSS */ .botao-clique-icon { display: flex; justify-content: center; align-items: center; /* Alinha os itens verticalmente */ padding: 10px 15px; gap: 15px; /* Espaço entre o ícone e o texto */ background-color: #181717; /* Cor inicial do botão */ outline: 3px #181717 solid; outline-offset: -3px; border-radius: 5px; border: none; […]