Surcape -
Redes Sociais:

Você não está conectado. Conecte-se ou registre-se

Botão em HTML/CSS

Mensagem - Página 1 de 1

1 Botão em HTML/CSS em Dom Nov 01, 2015 9:17 pm

avatarMembro Ativo
Eai, tava vendo uns ícones aqui no meu PC, e decidi fazer um botão com um que eu encontrei, ficou simples, mas é isso.


Source

Spoiler:

<html>
<head>
<title>Surcape</title>

<style type="text/css">
.text {
background-color: rgb(95,164,197);
float: left;
padding: 4px;
padding-right: 35px;
height: 30px;
border-radius: 4px;
font-family: "Segoe UI";
color: #fff;
letter-spacing: -1px;
font-size: 20px;
text-shadow: 0 2px rgba(0,0,0,0.18);
font-weight: 300;
margin-top: 20px;
margin-bottom: 0;
box-shadow: 0 0 5px rgba(0,0,0,0.18);
}
.text-icon {
position: fixed;
background-image: url(http://imgur.com/cyZYFGI.png);
width: 22px;
height: 20px;
top: 34px;
left: 60px;
transition: 0.8s;
-webkit-transition: 0.8s;
-moz-transition: 0.8s;
}
.text-icon:hover{
opacity:0.9;
}
</style>
</head>
<body>
<a href="#"><div class="text">Curtir
<div class="text-icon"></div>
</div></a>
</body>
</html>

2 Re: Botão em HTML/CSS em Dom Nov 01, 2015 9:21 pm

avatarParticipativo
Ficou muito bom cara, parabéns.

3 Re: Botão em HTML/CSS em Dom Nov 01, 2015 9:22 pm

avatarDeveloper
Ficou legal. Mas invés de ter utilizado um background como o dedo de curtir poderia ter utilizado a font-awesome.

Já agora, quem quiser ver o resultado com o efeito hover: https://jsfiddle.net/12nt49u3/

4 Re: Botão em HTML/CSS em Dom Nov 01, 2015 9:33 pm

avatarMembro Ativo
Fraise escreveu:Ficou legal. Mas invés de ter utilizado um background como o dedo de curtir poderia ter utilizado a font-awesome.

Já agora, quem quiser ver o resultado com o efeito hover: https://jsfiddle.net/12nt49u3/
Obrigado cara, estava mesmo procurando algum outro método de fazer isso

5 Re: Botão em HTML/CSS em Dom Nov 01, 2015 9:36 pm

avatarTurista
Muito bom! Tente fazer em modo responsivo da próxima vez

Atenciosamente,
tio Lai0n


__________________________________

6 Re: Botão em HTML/CSS em Dom Nov 01, 2015 11:28 pm

avatarMembro Ativo
Muito bonito, Parabéns amigo.

7 Re: Botão em HTML/CSS em Dom Nov 01, 2015 11:30 pm

avatarParticipativo
Ficou Ótimo cara, Parabéns.

Conteúdo patrocinado

Mensagem - Página 1 de 1

Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum