Imitar botão arachne (MS-DOS) com css

Pangas · 31 de março de 2013

Olá! Euestou tentando imitar um botão igual ao do navegador arachne que era utilizado nos anos 90 para acessar a internet. É só para experiências. Mas até agora eu cheguei nisso aqui.

<!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>

Pretendo fazer uma coisa que use muito pouco código. Pois sou do tipo "economico". E já que chegou as CSS3 eu não precisarei fazer tanta "gabbiarra". Concordas? Rs.

Só para ter uma ideia do que eu estou querendo fazer.

https://www.youtube.com/watch?v=P4XBa5jlWcs

Pangas · 15 de abril de 2013

Solução:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Range type</title>
<style>
body {
background:blue;
}

#cont {
width:700px;
height:800px;
}

.botao {
position:relative;
width:70px;
height:70px;
background:#9c9c9c;
border-top:solid 3px cyan;
border-left:solid 3px cyan;
margin:5px;
}

.botao:focus:active {
border-right:solid 2px cyan;
border-bottom:solid 2px cyan;
border-top:none;
border-left:none;
}
</style>
</head>
<body>

<div id="cont"><button class="botao" onclick="window.location = 'www.google.com'">Texto</button></div>

<span style="float:right; text-align:center;">Teste<img src="img/PLOGO.jpg"></span>
</body>
</html>