Creating your own type of custom input/button

As a web developer, there are lots of things that you can customise when you know and have the knowledge how to.

One of these things is having the ability to create your very own personal style of buttons and inputs.

Why do this?
Well, it makes your website look very unique and will definitely attract the users attention, when they see a type of button or input that they've maybe never seen before. This will help to keep a user engaged and on your webpage.

How to achieve this?
Using CSS. That's right. Using pure CSS you can create your own style of buttons and inputs to reuse throughout your website and web development project. We don't need any fancy plugins and we don't even need to use JavaScript. Utilising CSS variables can make this task even faster and more efficient aswell.

What type of buttons/inputs can you create?
You can make any type you want however the best practice and most professional/slick approach is to change the highlights, borders, colours, background colours to match your website's colour scheme. For example if your website had primary colours of green and black, you could make your main buttons green with a white colour, and make your inputs highlight with black when you focus on them. This is just a basic example.

Why not have a go? Try it out and let me know how you get on! Unsure how to code using HTML and CSS/JavaScript? Check out my online course https://beginnerwebdevelopment.com

Please comment below, some suggestions of posts you'd like me to do. Would you like me to do a live coding event through a Facebook live video where I create something? Suggest below in the comments! 🔥😎

Comments

Post a Comment

Popular posts from this blog

⚡️ What is a front-end CSS framework in web development?

Image
This is a big topic and aspect of web development that you'll come across after you learn the beginner web development fundamentals and web development beginner topics; HTML, CSS, JS. Also referred to as “CSS frameworks,” these are packages containing pre-written, standardized code in files and folders.  They give you a base to build on while still allowing flexibility with the final design. Typically, front-end frameworks contain the following components: A grid which makes it simple to organize the design elements of your website Defined font styles and sizing that varies based on its function (different typography for headings versus paragraphs, etc.) Pre-built website components like side panels, buttons, and navigation bars Why would we use one? Save time Use components and elements/styles that you might not think of yourself Very consistent and reliable code examples Bootstrap Bulma UI Kit Foundation Tailwind If you'd like to see some of these in action and le
Read more

How to be a confident, new web developer

Image
Just DO it. This may seem really simple, but sometimes just doing it, works. A lot of the time you will hesitate when wanting to try something different in web development. For example, if you have an idea of how to implement functionality, my advice is just do it! Try it out. If it doesn't work, try something else - it's the best way to self learn as well after you have learnt the basics and fundamentals. Seek advice. Seeking good experienced advice from a web developer who knows what they are talking about is a great way to solidify and help you understand a problem. If you're stuck on an issue and you really can't understand how to fix or implement it, then sometimes, asking a senior or more experienced web developer will benefit you. They can pass knowledge and expertise on to you which you'll never forget! Take a break. I find a lot of times if I've hit a problem in web development I can't solve, taking a quick 5 minute break and coming back
Read more

Programming Styles

Image
In web development there are lots of different styles of programming. As you get more experienced you will adapt your own personal style and form coding habits which you will live by while developing. There are so many different preferences which lots of different developers adapt to and adhere to. It's best to get started with the most advised and best coding / programming standards so you don't pick up any bad or inefficient habits. There are a number of things that make up standards or styles when thinking about programming / coding style. These include; code indentation style, spacing, number of blank lines between statements or elements, font, colour scheme, naming conventions, etc. With all of these together combined with good practices you can ensure that you're code will remain consistent throughout projects and throughout your career. The main aim is to produce readable, maintainable code, while also preventing duplication of code. In my online course I
Read more