A continuación un ejercicio en css:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Botón</title>
</head>
<style>
input.button{border:5px solid #256323;
font-size:50px;
font-family: Arial
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
padding-bottom: 100px;
border-radius: 60px;
background:#D1A454;
background: linear-gradient(left, #D1A454, #FF0);
background: -moz-linear-gradient(left, #D1A454, #FF0);
background: -webkit-linear-gradient(left, #D1A454, #FF0);
background: -o-linear-gradient(left, #D1A454, #FF0);
color:#000;
}
input.button:hover
{background: #365D9D;
color: #FFFFFF;
border-color: #FBFFAD;
border-radius: 10px;
}
input.button:focus{
background: #0F0;
background: linear-gradient(left, #0F0, #FF0);
background: -moz-linear-gradient(left, #0F0, #FF0);
background: -webkit-linear-gradient(left, #0F0, #FF0);
background: -o-linear-gradient(left, #0F0, #0F0);
color: #FFFFFF;
border-color: #F00;
border-radius: 30px;}
/* ___________________________________________________________________________________________________________________________ */
input.asd
{
border: 1px solid #DBE1EB;
font-size: 18px;
font-family: Arial, Verdana;
padding-left: 7px;
padding-right: 7px;
padding-top: 5px;
padding-bottom: 5px;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-o-border-radius: 4px;
background: #4972B5;
background: linear-gradient(left, #4972B5, #618ACB);
background: -moz-linear-gradient(left, #4972B5, #618ACB);
background: -webkit-linear-gradient(left, #4972B5, #618ACB);
background: -o-linear-gradient(left, #4972B5, #618ACB);
color: #FFFFFF;
}
input.asd:hover
{
background: #365D9D;
background: linear-gradient(left, #365D9D, #436CAD);
background: -moz-linear-gradient(left, #365D9D, #436CAD);
background: -webkit-linear-gradient(left, #365D9D, #436CAD);
background: -o-linear-gradient(left, #365D9D, #);
color: #FFFFFF;
border-color: #FBFFAD;
}
</style>
<body>
<center><input type="button" class="button" value="HOLA"><hr></center>
<input type="button" class="asd" value="HOLA">
</body>
</html>
Publicar un comentario