Los elementos de entrada de estilo CSS

Question

estoy tratando de labrar un texto de entrada y el botón debajo de la imagen:

me ha atado como this.
La salida no es lo mismo que la imagen. como soy nuevo en CSS.
¿Podría ayudarme a corregir mi código?

Answer 1

Se puede utilizar una combinación de border-radius y box-shadow para el efecto en la imagen

example jsfiddle

body {background-color:#636363;} 

input[type=text] 
{ 
    background-color: #BFBDBD; 
    border:solid 1px #BFBDBD; 
    color: #979797; 
    height: 28px; 
    padding-left:10px; 
    width: 191px; 
    box-shadow: 2px 2px 0 #828181 inset; 
} 
input[type=button] 
{ 
    background-color: #1E1E1E; 
    color: #979797; 
    height: 24px; 
    width: 103px; 
    color: #bbbbbb; 
    text-transform:uppercase; 
    box-shadow:-1px 2px #6E6B6A inset; 
} 

input[type=button], input[type=text] 
{ 
    border: 0; 
    border-radius:5px; 
    font-family: Sansation,Arial; 
} 

Answer 2

Tiene un error ortográfico en su último selector dice inpur en lugar de input.

Además, no tiene una clase llamada entrada, en realidad se está enfocando en los elementos mismos. Cambiar .input a input

Para obtener el efecto de esquinas redondeadas, agregue un radio de borde. Su última declaración CSS debe tener este aspecto con los cambios anteriores

input[type=button], input[type=text] 
{ 
    border-radius: 5px; 
    font-family: Sansation; 
}