Imitar botão do Arachne (MS-DOS) com css [RESOLVIDO]

1. Imitar botão do Arachne (MS-DOS) com css [RESOLVIDO]

Lerub
(usa Debian)

Enviado em 31/03/2013 - 16:31h

Olá! Eu pretendo criar um botão igual ao do MS-DOS com CSS3. Agora que eu posso criar bon s efeiitos com o efeito hover e o focus (onclick). Até agora eu cheguei até esse ponto.

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

<title>Range type</title>

<style>

body {

background:blue;

}



#botao {

background:gray;

position:absolute;

top:300px;

left:50%;

width:80px;

height:80px;

box-shadow:inset -1px 0px 6px 3px black;

}

#botao:active {

box-shadow:inset 0px 0px 4px 2px black;



}

</style>

</head>

<body>

<div id="botao">Texto</div>

</body>

</html>

Aqui um vídeo para que você entenda melhor o que eu estou querendo dizer.

http://youtu.be/P4XBa5jlWcs?t=7m53s

0 0

Quote

2. Re: Imitar botão do Arachne (MS-DOS) com css [RESOLVIDO]

Lerub
(usa Debian)

Enviado em 01/04/2013 - 00:06h

Aloha! Terra das css.

0 0

Quote

3. Re: Imitar botão do Arachne (MS-DOS) com css [RESOLVIDO]

Lerub
(usa Debian)

Enviado em 03/04/2013 - 08:00h

Esquece. Já descobri como.

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

<title>Range type</title>

<style>

body {

background:blue;

}



#botao {

position:absolute;

top:50%;

left:50%;

width:60px;

height:60px;

background:gray;

border-top:solid 2px cyan;

border-left:solid 2px cyan;

}



#botao:focus:active {

border-right:solid 2px cyan;

border-bottom:solid 2px cyan;

border-top:none;

border-left:none;

}

</style>

</head>

<body>

<button id="botao">Texto</button>

</body>

</html>