The latest articles on Forem by Euro Rincon (@rinkon). https://forem.com/rinkon https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F601039%2Fe4bc8074-3330-444a-9e2a-13ffa583c178.jpg https://forem.com/rinkon en Euro Rincon Sat, 25 May 2024 19:48:09 +0000 https://forem.com/rinkon/buttons-with-css-effects-o66 https://forem.com/rinkon/buttons-with-css-effects-o66 <h2> Buttons with CSS Effects </h2> <p>Hello, dev.to community! 🚀</p> <p>I want to share with you my project on <a href="https://codepen.io/Rincon/full/zardaq">CodePen</a>, where I have created 5 examples of animated buttons using CSS. These buttons feature roll-over effects utilizing SVG and CSS and have received a lot of positive attention with many views and comments. Here are some highlights:</p> <ul> <li> <strong>Roll-over Effects</strong>: Each button has a unique roll-over effect that adds dynamism and style to web interfaces.</li> <li> <strong>Using SVG and CSS</strong>: The effects are achieved by combining SVG for scalable vector graphics and CSS for animations.</li> <li> <strong>Pug and Sass</strong>: I used preprocessors like Pug for HTML and Sass for CSS, which allow me to write code more efficiently and in an organized manner.</li> </ul> <h3> Key Learnings </h3> <ul> <li> <strong>Pug</strong>: Simplifies writing HTML with a cleaner syntax.</li> <li> <strong>Sass</strong>: Makes CSS management easier with variables, nesting, and mixins, improving code maintainability.</li> </ul> <h3> Benefits </h3> <p>These buttons are not only visually appealing but also enhance the user experience when interacting with the page. I invite you to explore the examples and see how you can integrate them into your own projects.</p> <h3> What's Next? </h3> <p>I'm always looking for new ways to improve and learn. I'd love to hear your feedback and suggestions!</p> <p><a href="https://codepen.io/Rincon/full/zardaq">Explore my project on CodePen</a></p> css svg webdesing sass Euro Rincon Sat, 25 May 2024 19:44:15 +0000 https://forem.com/rinkon/botones-con-efectos-css-51gp https://forem.com/rinkon/botones-con-efectos-css-51gp <h2> Botones con efectos CSS </h2> <p>¡Hola, comunidad de dev.to! 🚀</p> <p>Quiero compartir con ustedes mi proyecto en <a href="https://codepen.io/Rincon/full/zardaq">CodePen</a>, donde he creado 5 ejemplos de botones animados con CSS. Estos botones tienen efectos de roll-over utilizando SVG y CSS, y han tenido una gran acogida, con muchas visitas y comentarios positivos. Aquí algunos puntos destacados:</p> <ul> <li> <strong>Roll-over Effects</strong>: Cada botón presenta un efecto de roll-over único que añade dinamismo y estilo a las interfaces web.</li> <li> <strong>Uso de SVG y CSS</strong>: Los efectos se logran combinando SVG para gráficos vectoriales escalables y CSS para las animaciones.</li> <li> <strong>Pug y Sass</strong>: He utilizado preprocesadores como Pug para HTML y Sass para CSS, lo que me permite escribir código de manera más organizada y eficiente.</li> </ul> <h3> Aprendizajes Clave </h3> <ul> <li> <strong>Pug</strong>: Simplifica la escritura de HTML con una sintaxis más limpia.</li> <li> <strong>Sass</strong>: Facilita la gestión de CSS con variables, anidamiento y mixins, lo que mejora la mantenibilidad del código.</li> </ul> <h3> Beneficios </h3> <p>Estos botones no solo son visualmente atractivos, sino que también mejoran la experiencia del usuario al interactuar con la página. Los invito a explorar los ejemplos y probar cómo pueden integrarlos en sus propios proyectos.</p> <h3> ¿Qué Sigue? </h3> <p>Siempre estoy buscando nuevas formas de mejorar y aprender. <br> ¡Me encantaría escuchar sus comentarios y sugerencias!</p> <p><a href="https://codepen.io/Rincon/full/zardaq">Explora mi proyecto en CodePen</a></p> codepen css animation