Botão Próximo - IGNIPLEX

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.

Related Posts