Botão Próximo

Esse estilo de botão oferece uma experiência visual atraente para os usuários. O botão possui um fundo colorido, texto centralizado e um efeito de transição suave quando o cursor é movido sobre ele. Além disso, o texto é acompanhado por uma pequena seta animada que aparece quando o botão é hoverizado.

DEMO

Código:

		<style>
        button {
        	display: inline-block;
            border-radius: 4px;
            background-color: #3d405b;
            border: none;
            color: #FFFFFF;
            text-align: center;
            font-size: 17px;
            padding: 16px;
            width: 130px;
            transition: all 0.5s;
            cursor: pointer;
            margin: 5px;
		}
		button span {
			cursor: pointer;
            display: inline-block;
            position: relative;
            transition: 0.5s;
		}
		button span:after {
        	content: '»';
            position: absolute;
            opacity: 0;
            top: 0;
            right: -15px;
            transition: 0.5s;
		}
		button:hover span {
        	padding-right: 15px;
        }
		button:hover span:after {
        	opacity: 1;
            right: 0;
		}
	</style>
	

 
    	 <button>
         	<span>PRÓXIMO</span>
		</button>
	

Se houver alguma dificuldade, por favor, deixe aqui nos comentários, eu vou responder o mais rápido que poder. Muito obrigado e boa sorte.

Botão com efeito Led

Este botão possui uma aparência elegante e moderna. Com o uso do CSS, foram aplicados estilos que destacam sua presença. Ele apresenta um ícone exclusivo e um texto cativante que diz "Explore me". Os estilos aplicados incluem alinhamento centralizado, bordas arredondadas, sombra sutil e transições suaves ao interagir com o botão.

DEMO

Código:

    	<style>
        button {
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            font-family: inherit;
            font-size: 13px;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.4px;
            color: #7e97b8;
            background-color: #e0e8ef;
            border-style: solid;
            border-width: 2px 2px 2px 2px;
            border-color: rgba(255, 255, 255, 0.333);
            border-radius: 40px 40px 40px 40px;
            padding: 16px 24px 16px 28px;
            transform: translate(0px, 0px) rotate(0deg);
            transition: 0.2s;
            box-shadow: -4px -2px 16px 0px #ffffff, 4px 2px 16px 0px rgb(95 157 231 / 48%);
        }
        button:hover {
            color: #516d91;
            background-color: #E5EDF5;
            box-shadow: -2px -1px 8px 0px #ffffff, 2px 1px 8px 0px rgb(95 157 231 / 48%);
        }
        button:active {
            box-shadow: none;
        }
    </style>
	

 
    	 <button>
        	<svg class="css-i6dzq1" fill="none" height="24" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewbox="0 0 24 24" width="24">
            <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>
        </svg>
        Explore me
    	</button>
	

Se houver alguma dificuldade, por favor, deixe aqui nos comentários, eu vou responder o mais rápido que poder. Muito obrigado e boa sorte.

Botão 1

Neste post, iremos explorar passo a passo como incluir um botão personalizado em suas postagens, permitindo que você aumente a interatividade e atraia ainda mais a atenção dos seus leitores. 

+ Adicionar

Para adicionar botão ao nas suas postagens, siga estas etapas:

1. Acesse o painel de controle do Blogger e faça login na sua conta.


2. Selecione o blog que você deseja editar, caso possua mais de um.


3. No painel lateral esquerdo, clique em "Tema".


4. Na guia "Modelo ou Tema", terá um botão e ao lado um cetinha, clique na seta e esolha "Editar HTML".


5. Antes de fazer qualquer alteração, é altamente recomendável fazer backup do seu modelo atual. Para fazer isso, clique na seta e escolhe "Fazer backup/Restaurar".


6. No código HTML do seu modelo, role até encontrar a tag </head>.


7. Logo acima da tag </head>, adicione o seguinte código css:

  
	<style> 
        .botao1 {
                display: flex !important;
                padding: 0.7em;
                margin: 0 auto;
                width: 150px;
                border: 2px solid #24b4fb;
                background-color: #24b4fb;
                border-radius: 0.9em;
                color: #fff;
                font-weight: 600;
                transition: all ease-in-out 0.2s;
                justify-content: center;
                align-items: center;
         }

        .botao1:hover {
            background-color: #0071e2;
        }
	</style>
 

Depois de colar o código, salve.

Agora vamos adicionar o botão na sua postagem:

1. No painel lateral esquerdo, clique em "Postagens" e escolha a postagem em que você deseja adicionar o botão.


2. Muda a vista da sua postagem para HTML, clicando no lápis no canto superior esquerdo da postagem e esolha "Visualização em HTM"


3. No editor de postagem, localize o link ao qual você deseja transformar em botão.Se tiver dificuldades para localizar o link, preciona as teclas "CTRL + f" e escxreva o a palavra que esta no seu link, como "Download" se for o seu caso.


4. Localize o código HTML do link e adicione o atributo class a ele antes da letra "a", o HTML do link estaá mais ou menos assim: <a href='seulink.com'>Download</a>. E deves adicionar a class (class='btn1') como no exemplo abaixo exemplo:

  	
  	<a class='botao1'><span>+</span> Adicionar</a>
 

Para adicionar isso em uma outra postagem ou link, é só adicionar a class (class='botao1'>) no link que deseja transformar em botão, nao precisará repor novamento o css por cima da sua </head>.

Se houver alguma dificuldade, por favor, deixe aqui nos comentários, eu vou responder o mais rápido que poder. Muito obrigado e boa sorte.

Como adicionar Botão personalizado nas suas Postagens

Neste post, vou te mostrar como adicionar um botão personalizado ao seu blog no Blogger sem a necessidade de entender HTML e CSS. Tudo já está pronto para você, tornando o processo simples e sem complicações. Com apenas alguns passos, você poderá adicionar um botão personalizado às suas postagens e direcionar seus leitores para ações específicas de forma rápida e fácil. Vamos começar!

1. Acesse a página inicial do Blogger e faça login na sua conta, selecione o blog no qual deseja adicionar o botão personalizado, no painel de controle do seu blog, clique em "Tema" ou "Layout", dependendo da versão do Blogger que você está usando, e clica na setinha.

2. Na próxima página, você verá uma prévia do seu tema atual. Procure a opção "Editar HTML" ou "Editar código" e clique nela.

3. Agora você estará na página de edição de código do seu tema, pressione as teclas "Ctrl + F" e escreva na barra de busca a tag: </head>

 e cole antes desta tag </head> este código:

	.btn {
      height: 2.8em;
      width: 9em;
      background: transparent;
      -webkit-animation: jello-horizontal 0.9s both;
      animation: jello-horizontal 0.9s both;
      border: 2px solid #016DD9;
      outline: none;
      color: #016DD9;
      font-size: 17px;
      text-decoration: none; /* Remova a decoração padrão dos links */
    }
    .btn a{
	text-decoration: none; /* Remova a decoração padrão dos links */
	}
    .btn:hover a{
		color: #fff;
	}
    .btn:hover {
      background: #016DD9;
      
      animation: squeeze3124 0.9s both;
    }
    @keyframes squeeze3124 {
      0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
      }
      30% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1);
      }
      40% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1);
      }
      50% {
        -webkit-transform: scale3d(1.15, 0.85, 1);
        transform: scale3d(1.15, 0.85, 1);
      }
      65% {
        -webkit-transform: scale3d(0.95, 1.05, 1);
        transform: scale3d(0.95, 1.05, 1);
      }
      75% {
        -webkit-transform: scale3d(1.05, 0.95, 1);
        transform: scale3d(1.05, 0.95, 1);
      }
      100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
      }
    }
  

4. Salve as alterações, e vá até a postagem que deseja adicionar o botão e muda a vista para "Visualização em HTML"

5. Pressione as teclas "Ctrl + F" e escreva na barra de busca o texto do link que quer transformar em botão, isso vai lhe ajudar a localizar mais rápido o seu link.

6. Por ultimo é só adicionar a classe (class='btn') dentro do link, mas deve ser depois da letra 'a' e antes do 'href', e salve as alterações.

Se não funcionar, substitua (<a href='seulink.com'></a>) pelo seguinte código: 

  	<button class="btn"><a href="#">BOTAO</a></button>
 

PS: Onde tem o # você teve remover e adicionar o seu link, mas mantendo as aspas.

Se houver alguma dificuldade, por favor, deixe aqui nos comentários, eu vou responder o mais rápido que poder. Muito obrigado e boa sorte.

Por que é importante ter um botão personalizado no site?

Ter um botão personalizado no site é importante porque permite aos proprietários de sites direcionar a atenção dos usuários para ações específicas que desejam que sejam tomadas. Esses botões personalizados podem ser projetados para se destacar visualmente e atrair a atenção do usuário, aumentando as chances de conversão, seja ela uma venda, um cadastro ou qualquer outra ação desejada.

Como um botão personalizado pode melhorar a experiência do usuário em um site?

Um botão personalizado pode melhorar a experiência do usuário em um site de várias maneiras. Ele pode ser projetado de forma a proporcionar uma aparência atraente e profissional, o que cria uma sensação de confiança e profissionalismo. Além disso, um botão personalizado pode ser posicionado estrategicamente para facilitar a interação do usuário com o site, tornando mais fácil para eles encontrar e executar as ações desejadas. Isso melhora a usabilidade e a navegabilidade geral do site.

Como um botão personalizado pode ajudar a aumentar as taxas de conversão?

Um botão personalizado pode aumentar as taxas de conversão ao direcionar a atenção do usuário para a ação desejada. Ao destacar visualmente o botão, tornando-o atraente e facilmente identificável, as chances de um usuário clicar e prosseguir com a ação desejada aumentam. Além disso, um botão personalizado pode transmitir uma sensação de urgência ou oferecer um incentivo adicional, como um desconto exclusivo, o que pode motivar ainda mais os usuários a agir.

Qual é o impacto de um botão personalizado no branding de um site?

Um botão personalizado pode ter um impacto significativo no branding de um site. Ao projetar um botão que esteja alinhado com a identidade visual da marca, como a escolha de cores, tipografia e elementos gráficos consistentes, o botão se torna um elemento reconhecível e associado à marca. Isso reforça a coesão visual do site e contribui para uma experiência de marca consistente. Além disso, um botão personalizado bem projetado pode transmitir uma imagem profissional e de qualidade, melhorando a percepção geral da marca pelos usuários.