NixOS Linux 17.03 Installation with KDE Plasma 5 on VMware Workstation

Ever seen buttons which say stuff like 'CLICK ME' or maybe 'BUY NOW' or even say stuff like 'Go There' or 'Add to Cart'? Well, of course, everyone has.

If you have your own site, blog or small business maybe with products or something that you want people to notice, then it is common how people show ads or show buttons which they want people to click on. These buttons can be used or multiple purposes not only as ads but also for things like collecting donations, sign ups, forms, etc. And if you have any need of a button, you came to the right place because I m going to show you various methods of how you can create your own little button.

How to Make Buttons

Well, I am guessing that you already have an idea in your mind of how you want to make your button like you already know the style you want, colors, size, shadings, and all the other stuff. Though, if you don't, then look at some of the examples provided

Method 1 - Da Button Factory
This site provides an amazing button generator that is not really that hard to use. In fact, it is fun. This little tool allows us to customize our button as much as we possibly can and lets us download the button as a .GIF, .PNG, .ICO or a .JPG image. And if we do not want to download he image, we can also just get a simple embedding code that they prepare for us or get the link of your current work-space for later editing if not done. Let me tell you how to use it.

1. First of all, you have to open the editor tab as soon as you have an idea. If you don't have one, then go to see the examples. If you find one that you like but just want to edit a it little bit, then go ahead.
2. After you open the editor, its time to get a bit familiar with the controls. In the editor, the first thing you should know is what you want to write, like for example, the things I wrote on the very first line. You should change the text in the text area.
3. Then you have the options to change the font of the text, its color, boldness, and italicization, and also to give the text a shadow with the option to change its color and distance from the text.
4. You can also change the size by making it either a fixed size or adapted to the text. You can also add the amount of padding that you want to add.
5. Now comes the option of the style you want, it can either be a rectangular box, a rounded box, or a completely round box. You can also choose the corner radius.
6. Next in line is the background. You can change the button's gradient type from a total of 4 options. You can obviously also change the color of the button as well.
7. Now comes an optional feature. You can optionally add a border to the button of any size and any color that you prefer.
8. Another optional feature is to add a shadow. If you choose to add this to your button, then you can change its color, size, and also the direction (orientation).
9. When you have completely edited it to you liking, you can click save, download it as a picture, or click embed to see the ways to embed the button onto your site.
10. YOUR DONE!

Method 2 - Html Button

This method is great if you want to learn the basics of HTML and create a simple clickable button. To do this, you will have to learn how to do a few things. And I will show you the basics.

For example, if you want to create an alerting button, try this.

<button type="button" onclick="alert('Hello world!')">Click Me!</button>

And this is the result you'd get


or at least something like this since my blog as a preset CSS code for buttons. but to see the real outcome, you an go ahead and try it yourself.

Note: If you use the <button> element in an HTML form, different browsers may submit different values. Use <input> to create buttons in an HTML form.

To learn the basic attributes you can use to specify the use for your button, I recommend taking help from W3Schools' tutorials
To beautify you button like my button above or to make it even better, you should use CSS styles. Why? I guess that this picture can answer that question.

I you use CSS styles and add them to your basic scripts or to the place your using them specifically, you can do amazing things even like matching your site. For example, try using the following CSS style script

<style>
.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
</style>

Now, to add a button while implementing the CSS script, you have to mention its class/id.

<button class="button">Button</button>

Go ahead, try it out here. There are a lot of other things you can do for your buttons, but for that you would require the knowledge of the CSS tags, and that is why W3Schools' tutorial will help you with the CSS tags in editing buttons

Method 3 - Best CSS Button Generator - CSS Button Generator

You have just learned how to create an HTML and CSS customized button from method 2. If you do not want to learn to do this yourself, an easy walk-around is to use this free tool to make css scripted buttons. All you have to do is follow these steps.

1. In the left side panel, there are a lot of pre-designed buttons ready to be used or even edited. So, you can either select, get some ideas of what you are looking for or make your own from scratch

2. In the right side panel, you can edit your button as much as you would like to. The first category is Text. You can change your buttons text by entering whatever text in the first textbox with your desired font in the last drop-down list. You can adjust the font size, make it bold or italic. The css code's class-name can be optionally added if wanted. 

3. Next comes the Button Size category. You can adjust the slider to change the buttons size both vertically and horizontally.

4. You can also change the borders of the button by increasing its radius to make it more circular or by in/decreasing the border width.

5. The next category is optional. It is to add a shadow to your button which gives it a more 3D effect. You can change the shadows vertical and horizontal position, change how it is spread over a distance and give it a blurred effect. Instead of an outer shadow, you can also click on the Inset checkbox and see what happens.
6. The last category is for text shadow. You can give your text a shadow effect and change its vertical and horizontal position or even give it a blur effect.
7. In the middle panel, you can change the button's colors, make it transparent or change the gradient effect. And also view your button's final outcome.
8. When you are satisfied with your button, you scan either share it with your friends on Facebook and Twitter, or get the CSS and HTML codes to implement them on your blog.
9. YOUR DONE!

Above, I have mentioned a few ways you can easily make a button for your own uses. I hope this helped and check back again soon.