Mac OS Hosts File

Adding host entries in your desktop can be beneficial if you run several servers or hosts on your internal network. Instead of typing and remembering long IP addresses, you simply type the name of each host to make things easier for you. Let’s say you have several servers named “one”, “two” and “three” in your internal network. Each hosts will have their own assigned static IP address. By editing your hosts file and adding host entries to it, you can then use the hostnames instead of IP addresses.

In the end, you can ping each hostname like this:

$ ping one
$ ping two
$ ping three

In addition, you can also use the hosts “one”, “two” or “three” on your browser URL if your host has a web interface. If there are no host entries, the ping command, as well as you browser will simply timeout. To make this all possible in your Mac OS, you’ll need to edit the /private/etc/hosts file, by opening the Terminal and typing:

$ sudo nano /private/etc/hosts

You need to add each host to the file in this format: ip_address hostname. See below: one two three

Save file and exit. Ctrl-o and Ctrl-x.

Flush the DNS by typing:

$ dscacheutil -flushcache

You can now ping and use the hostname anyway you want.

The only limitation with this approach is, you’ll have to edit the hosts file for each desktop or laptop that is on your network. You can avoid this by take the next step, by running your own internal DNS server.

A Custom HTML Button

HTML buttons are dull and boring. If you like to make your HTML buttons stand out in the crowd, you’ll need to style them using CSS. This article will show you how to spice up your HTML buttons, therefore giving them life and color.

To begin, here’s the syntax for the HTML button:

<input type="submit" value="Click here" />

Starting HTML4 and now with HTML5, button tags were made available. Instead of using input, you can simply use the button tags instead of the input tags. The button syntax is like this:

<button>Click here</button>

The following CSS styles will work for both input and button tags. In this article and for the sake of simplicity, I will use the input tag primarily, but it can substituted by button tags, and the same CSS can be applied with the same effect.

First, lets add an id called “submitbutton” to our button. This will identify our button from other buttons on the same page.

<input id="submitbutton" type="submit" value="Click here" />

Now that we have an ID, we can now style our button.

Here’s the CSS styles that I will be adding.

input#submitbutton {
  border:1px solid #007aa7; /*border color dark blue */
  background:#00aeef; /*the color of the button is blue */
  padding:5px 15px; /*add padding inside of the button*/
  -moz-border-radius: 5px; /* add rounded corners */
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0 0 4px rgba(0,0,0, .75); /* add drop shadows */
  -moz-box-shadow: 0 0 4px rgba(0,0,0, .75);
  box-shadow: 0 0 4px rgba(0,0,0, .75);
  color:#f3f3f3; /* text color is white */
  font-size:1em; /* font size is 1em */
  cursor:pointer; /* change cursor when hover */
input#submitbutton:hover, input#submitbutton:focus {
  background-color :#0090c6; /* the background a little darker*/
  -webkit-box-shadow: 0 0 1px rgba(0,0,0, .75); /* drop shadow is narrower to give a pushed effect */
  -moz-box-shadow: 0 0 1px rgba(0,0,0, .75);
  box-shadow: 0 0 1px rgba(0,0,0, .75);
  • The border is set to solid and dark blue. Setting the border is important, otherwise the button remains the same.
  • The background color is blue which will be the color of the button itself.
  • Padding is added to the inside of the button to create more space.
  • Rounded corners were added to make the button corners less edgy.
  • Shadow effects were added to give it more depth.
  • The text color is white.
  • Font size is set to 1em.
  • A slightly darker background is added for the hover effect.
  • The shadow is narrower in hover mode to give it a pushed effect.

See the demo.