<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
.controles *{
display: inline-block;
}
.controles [type=text] {
width: 210px;
height: 24px;
background-color: #CCC;
box-shadow: inset 0 25px 10px -10px rgba(255, 255, 255, 0.2);
padding: 0 2px;
margin: 0;
outline: none;
border: 0;
vertical-align: middle;
}
.controles .flecha-izq {
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: 6px solid #FFF;
margin-left: -10px;
vertical-align: middle;
}
.controles .flechaYboton {
position: relative;
left: 5px;
}
.controles .flechaYboton .f-der {
margin-right: -4px;
border-right: 6px solid #A2D6EB;
}
.controles .flechaYboton [type=submit] {
background-color: #A2D6EB;
width: 79px;
height: 24px;
text-align: center;
font-weight: bold;
border: 0;
vertical-align: middle;
}
.controles .flechaYboton:hover{
margin-left: -5px;
}
.controles .flechaYboton:hover [type=submit] {
width: 84px;
background-color: #C5F0FF;
}
.controles .flechaYboton:hover .f-der {
border-right: 6px solid #C5F0FF;
}
</style>
</head>
<body>
<div class="controles">
<input type="text" value="" />
<span class="flecha-izq"></span>
<div class="flechaYboton">
<span class="flecha-izq f-der"></span>
<input type="submit" class="boton" value="Enviar" />
</div>
</div>
</body>
</html>