HTML5 y CSS3 pt. 3: Formularios y Tablas 05

Transiciones - clase 'enviar' para input submit.
Propiedades CSS: cursor: pointer, transition, transform: scale y rotate.

004_primeras_paginas/README.md

@@ -173,27 +173,22 @@ en [productos.css](./html_css_parte2/productos.css).
 Se utiliza una imagen como fondo con la propiedad css background
 `background: url(./imagenes/bg.jpg)` para la etiqueta `<footer>`.
 
-[Centrar](https://www.aluracursos.com/blog/centrar-un-elemento-con-css) un
+- [Centrar](https://www.aluracursos.com/blog/centrar-un-elemento-con-css) un
 elemento con css.
-
-Caracteres especiales, unicode
+- Caracteres especiales, unicode
 [wiki](https://en.wikipedia.org/wiki/List_of_Unicode_characters).
 
 Final curso HTML5 y CSS parte 2
 
 ### Parte 3 - Formularios y Tablas
 
-Nueva página, [contacto.html](./html_css_parte3/contacto.html).
-
-Se renombraron los estilos css: productos.css como [style.css](./html_css_parte3/style.css),
+- Nueva página, [contacto.html](./html_css_parte3/contacto.html).
+- Se renombraron los estilos css: productos.css como [style.css](./html_css_parte3/style.css),
 y style.css como [style_home](./html_css_parte3/style_home.css).
-
-Creación de formulario HTML, tags `<form>`', `<input>` (text y submit)
+- Creación de formulario HTML, tags `<form>`', `<input>` (text y submit)
 para entradas de usuario. Tag `<label>` como etiqueta.
-
-Conexión del **input** () con su **label**.
-
-Uso de `id` para el `input` asociado al atributo `for` del `label`.
+- Conexión del **input** () con su **label**.
+- Uso de `id` para el `input` asociado al atributo `for` del `label`.
 
 Jerarquía en css, ejemplo.
 
@@ -297,6 +292,7 @@ p.test { color: magenta; }
 
 </details></br>
 
-Etiqueta `<fieldset>` como agrupador y `<legend>` como parrafo.
-
-Descripción de imagenes `alt="Descripción de imagen"`.
+- Etiqueta `<fieldset>` como agrupador y `<legend>` como parrafo.
+- Descripción de imagenes `alt="Descripción de imagen"`.
+- Clase css *enviar* para input submit "Enviar Formulario" [contacto](./html_css_parte3/contacto.html#L63).
+- Propiedades: cursor (pointer), transition, transform (scale, rotate).

004_primeras_paginas/html_css_parte3/contacto.html

@@ -60,7 +60,7 @@
                 <label class="checkbox"><input type="checkbox" checked>
                     ¿Te interesa recibir novedades y ofertas?
                 </label>
-                <input type="submit" value="Enviar Formulario"/>
+                <input type="submit" class="enviar" value="Enviar Formulario"/>
             </form>
         </main>
         <footer>

004_primeras_paginas/html_css_parte3/style.css

@@ -120,6 +120,25 @@ form label, form legend {
     margin: 20px 0;
 }
 
+.enviar {
+    width: 40%;
+    padding: 15px 0;
+    font-size: 18px;
+    font-weight: bold;
+    color: #f1f1f1;
+    background: #046dfc;
+    border: none;
+    border-radius: 5px;
+    /*transition: 0.3s background;*/
+    transition: 0.3s all;
+    cursor: pointer;
+}
+
+.enviar:hover{
+    background-color: #cd4f39;
+    transform: scale(1.2) rotate(4deg);
+}
+
 /* Usados para observar Jerarquía en CSS
 form p {
     color: blue;