Aprovecho que el tema todavía vive y actualizo el ejemplo (que ya nos parece desprolijo) para hacer botones con formas.
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>BOTONERA.</title>
<style type="text/css">
.botones{
background-color : buttonface;
width : 130px;
height : 40px;
font-size . 1px;
}
.rec {
width : 20px;
height : 20px;
font-size : 1px;
border-style : solid;
border-color : red;
border-radius : 10px;
-ms-border-radius : 10px;
-moz-border-radius : 10px;
-webkit-border-radius : 10px;
-khtml-border-radius: 10px;
background-color : #F00;
padding : 0;
margin : 10px;
float : left; }
.play{
width : 20px;
height : 20px;
font-size : 1px;
border-style : solid;
border-top-color : buttonface;
border-left-color : #000;
border-right-color : buttonface;
border-bottom-color : buttonface;
border-left-width : 20px;
border-right-width : 1px;
border-bottom-width : 10px;
border-top-width : 10px;
background-color : #000;
padding : 0;
margin : 10px;
float : left;
}
.pause{
width : 20px;
height : 20px;
font-size : 1px;
border-style : solid;
border-top-color : buttonface;
border-left-color : #000;
border-right-color : #000;
border-bottom-color : buttonface;
border-top-width : 1px;
border-left-width : 7px;
border-right-width : 7px;
border-bottom-width : 1px;
background-color : buttonface;
padding : 0;
margin : 10px;
}
.stop{
width : 20px;
height : 20px;
font-size : 1px;
border-width : 1px;
border-style : solid;
background-color : #000;
padding : 0;
margin : 10px;
}
</style>
</head>
<body>
<h2>Botonera. (Firefox 4; Opera 11; Chrome 12. En IExplorer 8 no se ve el botón redondo.)<h2>
<div class="botones"><input
type="button" class="rec" value="" onclick="alert('rec')" title="REC"><input
type="button" class="play" value="" onclick="alert(this.className); if(this.className == 'pause')this.className='play'; else this.className='pause'" title="PLAY / PAUSE"><input
type="button" class="stop" value="" onclick="alert('stop')" title="STOP"></div>
</body>
</html>
Agregué el de "REC", que aún no se ve en
IE. Existen métodos propietarios para hacerlo 'redondo', pero no vale la pena complicar el demo, si sabemos que en algún momento va a funcionar. Además, cuadrado y todo, se entiende si lo pintamos de rojo.
Otra variación es el cambio "PLAY / PAUSE". Lo puse
per codere, no agrega ni quita nada.
Intentando hacer triángulos en CSS Animación amorfa en div.