Using a button is, so far, the preferred way to interact with an electronic stuff; such as the radio, TV, music player, and even a smartphone that has a voice command feature still needs at least one or two physical buttons.

Furthermore, in this digital age, the button has evolved in its digital form as well, which makes it more interactive, dynamic and real easy to make, compared to the physical button.

So, this time, we are going to create a slick and interactive button which is based on this excellent design over at Dribbble using only CSS.

Well, let’s just get started.

HTML

We will start off the button by placing the following markup on our HTML document. It’s really simple, the button would be based on an anchor tag, we also have a span next to it to create the indicator light, and then they are wrapped together within an HTML5 section tag.

  <section>  	<a rel="external" href="#button" id="button">&#xF011;</a>  	<span></span>  </section>  

Here is how our button initially looks like.

Basic Styling

In this section, we will start working on the Styles.

We firstly apply this dark background from Subtle Pattern on the body’s document, and center the section. Then, we will also remove the dotted outline upon the :focus and :active link.

  body {  	background: url('images/micro_carbon.png');  }  section {  	margin: 150px auto 0;  	width: 75px;  	height: 95px;  	position: relative;  	text-align: center;  }  :active, :focus {  	outline: 0;  }  

Using Custom Font

For the button’s icon, we will be using a custom font from Font Awesome rather than an image. That way the icon will be easily style-able and scale-able through the stylesheet.

Download the font, store the font files (eot, woff, ttf and svg) in the fonts folder, and then place the following code on your stylesheet to define a new font family.

  @font-face {    font-family: "FontAwesome";    src: url("fonts/fontawesome-webfont.eot");    src: url("fonts/fontawesome-webfont.eot?#iefix") format('eot'),    	   url("fonts/fontawesome-webfont.woff") format('woff'),    	   url("fonts/fontawesome-webfont.ttf") format('truetype'),    	   url("fonts/fontawesome-webfont.svg#FontAwesome") format('svg');    font-weight: normal;    font-style: normal;  }  

The power icon that we need for this button is represented in Unicode number F011; if you look closely at the HTML markup above, we have put this numeric character  within the anchor tag, but since we haven’t defined the custom font-family in the button style, the icon is yet to be rendered correctly.

Further reading: Unicode and HTML: Document Characters

Styling the Button

First of all, we need to define the custom font-family for the button.

Our button will be a circle, we can achieve the circle effect using the border-radius property and set the value at, at least, half of the button’s width.

Since, we are using a font for the icon, we can easily set the color and add text-shadow for the icon in the stylesheet as well.

Next, we will also create a beveled effect for the button. This effect is quite tricky. First, we need to apply background-color: rgb(83,87,93); for the button’s color base, then we add up to four layers of box-shadows.

  a {  	font-family: "FontAwesome";  	color: rgb(37,37,37);  	text-shadow: 0px 1px 1px rgba(250,250,250,0.1);  	font-size: 32pt;  	display: block;  	position: relative;  	text-decoration: none;  	background-color: rgb(83,87,93);      box-shadow: 0px 3px 0px 0px rgb(34,34,34), /* 1st Shadow */      			0px 7px 10px 0px rgb(17,17,17), /* 1nd Shadow */      			inset 0px 1px 1px 0px rgba(250, 250, 250, .2), /* 3rd Shadow */      			inset 0px -12px 35px 0px rgba(0, 0, 0, .5); /* 4th Shadow */  	width: 70px;  	height: 70px;  	border: 0;  	border-radius: 35px;  	text-align: center;  	line-height: 79px;  }  

There is also a larger circle in the outside of the button and we will be using the :before pseudo-element for it rather than adding extra markup.

  a:before {  	content: "";  	width: 80px;  	height: 80px;  	display: block;  	z-index: -2;  	position: absolute;  	background-color: rgb(26,27,29);  	left: -5px;  	top: -2px;  	border-radius: 40px;  	box-shadow: 0px 1px 0px 0px rgba(250,250,250,0.1),  			 	inset 0px 1px 2px rgba(0, 0, 0, 0.5);  }  

Further reading: CSS :before and :after pseudo-elements (Hongkiat.com)

Indicator Light

Under the button, there is a tiny light to designate the Power On and Off status. Below, we apply red for the light’s color because the power is initially OFF, we also add box-shadow to imitate the gleam effect of the light.

  a + span {  	display: block;  	width: 8px;  	height: 8px;  	background-color: rgb(226,0,0);  	box-shadow: inset 0px 1px 0px 0px rgba(250,250,250,0.5),  				0px 0px 3px 2px rgba(226,0,0,0.5);   	border-radius: 4px;   	clear: both;   	position: absolute;   	bottom: 0;   	left: 42%;  }  

The Effect

At this point our button starts looking good and we only need to add some effects on it, for instance, when the button is ‘being’ clicked on, we want the button to look like it’s being pressed and held down.

To achieve the effect, the first box-shadow in the button will be zeroed and the position will be lowered a bit. We also need to adjust the other three shadows’ intensities a little to match the button position.

  a:active {      box-shadow: 0px 0px 0px 0px rgb(34,34,34), /* 1st Shadow */      			0px 3px 7px 0px rgb(17,17,17), /* 2nd Shadow */      			inset 0px 1px 1px 0px rgba(250, 250, 250, .2), /* 3rd Shadow */      			inset 0px -10px 35px 5px rgba(0, 0, 0, .5); /* 4th Shadow */      background-color: rgb(83,87,93);    	top: 3px;  }  

Furthermore, once the button has been clicked, it should remain pressed down and the icon should ‘shine’ to indicate that the power is ON.

To achieve such an effect we will target the button using the :target pseudo-class, then change the icon’s color to white and add a text-shadow with white color as well.

  a:target {      box-shadow: 0px 0px 0px 0px rgb(34,34,34),      			0px 3px 7px 0px rgb(17,17,17),      			inset 0px 1px 1px 0px rgba(250, 250, 250, .2),      			inset 0px -10px 35px 5px rgba(0, 0, 0, .5);      background-color: rgb(83,87,93);    	top: 3px;    	color: #fff;    	text-shadow: 0px 0px 3px rgb(250,250,250);  }  

Further reading: Using :target pseudo-class

We also need to adjust the box-shadow in the circle outside the button, as follows.

  a:active:before, a:target:before {  	top: -5px;  	background-color: rgb(26,27,29);  	box-shadow: 0px 1px 0px 0px rgba(250,250,250,0.1),  			 	inset 0px 1px 2px rgba(0, 0, 0, 0.5);  }  

The light indicator will turn from the default red to green color to emphasize that the power is ON already.

  a:target + span {  	box-shadow: inset 0px 1px 0px 0px rgba(250,250,250,0.5),  				0px 0px 3px 2px rgba(135,187,83,0.5);  	background-color: rgb(135,187,83);  }  

Transition Effect

Lastly, to make the button’s effect run smoothly, we will also apply the following transition effect.

This snippet below will specifically add the transition to the color property and the text-shadow for 350ms in the anchor element.

  a {  transition: color 350ms, text-shadow 350ms;  	-o-transition: color 350ms, text-shadow 350ms;  	-moz-transition: color 350ms, text-shadow 350ms;  	-webkit-transition: color 350ms, text-shadow 350ms;  }  

This second snippet below will add the transition for the background-color and box-shadow property in the light indicator.

  a:target + span {  transition: background-color 350ms, box-shadow 700ms;  	-o-transition: background-color 350ms, box-shadow 700ms;  	-moz-transition: background-color 350ms, box-shadow 700ms;  	-webkit-transition: background-color 350ms, box-shadow 700ms;  }  

Final Result

We have come through all the styles we need, now you can see the final result live as well as download the source file from the links below.

• Demo
• Download Source

Bonus: How to turn it off

Here comes the bonus. If you have tried the button from the above demo, you’ve noticed that the button can only be clicked once, an that’s to turn it on, so how do we turn it off?.

Unfortunately, we have to do it with the jQuery, but it is really simple as well. Below is the all the jQuery code we need.

  $(document).ready(function(){  	$('#button').click(function(){  		$(this).toggleClass('on');  	});  });  

The snippet above will add the class ON in the anchor, and we used the toggleClass function from jQuery to add it. So, when the #button is clicked on, the jQuery will check whether the class ON has been added or not: when it is not, the jQuery will add the class, and if it has been added, the jQuery will remove the class.

Note: Don’t forget to include the jQuery library.

Now we have to change the Style a little bit. Simply replace all the :target pseudo-element with the .on class selector, as follows:

  a.on {      box-shadow: 0px 0px 0px 0px rgb(34,34,34),      			0px 3px 7px 0px rgb(17,17,17),      			inset 0px 1px 1px 0px rgba(250, 250, 250, .2),      			inset 0px -10px 35px 5px rgba(0, 0, 0, .5);      background-color: rgb(83,87,93);    	top: 3px;   	color: #fff;    	text-shadow: 0px 0px 3px rgb(250,250,250);  }  a:active:before, a.on:before {  	top: -5px;  	background-color: rgb(26,27,29);  	box-shadow: 0px 1px 0px 0px rgba(250,250,250,0.1),  			 	inset 0px 1px 2px rgba(0, 0, 0, 0.5);  }  a.on + span {  	box-shadow: inset 0px 1px 0px 0px rgba(250,250,250,0.5),  				0px 0px 3px 2px rgba(135,187,83,0.5);  	background-color: rgb(135,187,83);  }  

Finally, let’s try it in the browser.

• Demo
• Download Source

Related posts:

1. Creating A Rocking CSS3 Search Box
2. How to Create Gmail logo with CSS3
3. How to Create RSS Feed Logo with CSS3
4. HTML5 Tutorial: How to Build a Single Product Page

As owners of websites, one of the more important things you should do is to regularly backup the website. Most web hosting providers will enable daily or weekly backups, mainly for their disaster recovery purpose only. If you want to personally oversee a backup of your website, you can do it by yourself using the Backup function in hosting control panels like cPanel, Plesk and DirectAdmin. As a webmaster or domain owner, you are responsible for this task.

A good backup should have following criteria:

• Backup your data as frequently as possible.
• Give higher priority to critical data like database and web contents. Try to exclude temporary files.
• Your backup should NOT be saved inside the same server.
• Your backup should be retrievable and accessible anytime, anywhere.
• You should get notified for every backup status which has been scheduled.
• Your backup should be compressed, if disk space or bandwidth is your concern.

It is good if you can have your one FTP server to store backup remotely. But, what if the FTP server is down? How can we automate the backup task with limited access to the server? How can you be sure that the availability is always there? Cloud storage is your answer.

Cloud storage is becoming the best way to store files. Popular providers like Amazon S3, Dropbox, iCloud and Box.net are offering these facilities for free with some limitations. But, none of them are supporting FTP as the medium to transfer while almost all of webhosting providers only allow this transfer method.

Recommended Reading: Automate Your Dropbox Files With Actions

Backup Box

Here’s where Backup Box comes in. Backup Box helps you securely transfer anything on an FTP server to your Dropbox account. Actually, Backup Box can integrate your FTP account with cloud storage providers like Amazon, GitHub, Box.net and Flickr as well. At this very moment, only Dropbox integration is supported while the others are still under development. It is free to use, with limited features like monthly backup schedule and immediate transfer schedule. In this post, I am focusing on preparing the backup data for weekly backup while running on cPanel server.

We can use this tool with various ways of implementation such as 1, directly copying the web directory using FTP and transferring to Dropbox (compressed or uncompressed) or 2, creating a compressed backup (cPanel backup) and using FTP to fetch the backup to Dropbox.

Before we proceed with the tutorial, ensure that you have following required information:

• An FTP account which is mapped to your web directory. Get it from your hosting control panel.
• A Dropbox account. You can register here for free.
• A Backup Box account. You can register here for free.

Web directory > FTP > Dropbox

Since the database is also important, we need to prepare the database backup and put it into our web directory. If you are running on Linux hosting, you can use a task scheduler called a cron job with some help from mysqldump. In cPanel, it is located under cPanel > Advanced > Cron jobs.

Let’s use the following data as an example:

  Web directory path: /home/username/public_html  cPanel username: mycpanel  cPanel password: mypass123$  

Create a new weekly cron job and use the following command:

  mysqldump --opt -Q -u mycpanel -p'mypass123$' --all-databases > /home/username/public_html/databases.sql  

here’s an Example:

This will create an SQL backup file which includes all the databases under your cPanel account. Login into Backup Box. On the left panel, login into the FTP account by clicking the ‘gear’ icon. On the right panel, login into your Dropbox account.

You can choose Transfer public_html as a folder in the Transfer Options. This will transfer the whole public_html folder including all files into your Dropbox account. You can now start the immediate transfer by clicking Review. This will transfer the public_html folder to Dropbox. Once done, you can create Monthly schedule to automate this backup task monthly. Just click Monthly > select Date and Time > Finalize and Run. Note: If you want to use weekly or daily backup, you need to upgrade your subscription as stated in the website. Do not forget to change the cron job setting based on when you want the backup schedule to happen

cPanel backup > FTP > Dropbox

The good thing about cPanel is you can generate your own backup automatically using cPanel API. In this case, we will use PHP script to run on schedule to generate backup. Since the backup location needs to be exclusively for Backup Box, we will need to create an FTP account which is mapped to a new backup folder.

Go to cPanel > FTP and create an FTP account as the screenshot below. Do not create the FTP directory under public_html because it is accessible publicly via web browser (unless you protect the directory with a password):

We need to use PHP with cPanel API to trigger the backup process. Download this file (cpanel-php-backup.zip) and unzip it. You should see 2 files, cpanel-backup.php and xmlapi.php.inc. Change all required information inside cpanel-backup.php as below:

  // Credentials for cPanel account  $source_server_ip = ""; // Server IP or domain name eg: 212.122.3.77 or cpanel.domain.tld  $cpanel_account = ""; // cPanel username  $cpanel_password = ""; // cPanel password    // Credentials for FTP to Backup Box  $ftpacct = ""; // FTP account  $ftppass = ""; // FTP password  $email_notify = ''; // Email address for backup notification  

Save the file and upload both files into your public_html directory using FTP. You can start to generate a backup by accessing the PHP file directly via browser, which is usually http://www.yourwebsite.com/cpanel-backup.php .

In order to automate cPanel backup creation, we need to setup a weekly cron job into cPanel and use following command:

  php -q /home/username/public_html/cpanel-backup.php  

Here is a sample:

Login into Backup Box. On the left panel, login into the FTP account (use the backup box FTP account) and in the right panel, login into your Dropbox account:

Since we store backup files into a dedicated folder, we can only transfer the contents of it. Select Transfer only the contents of / in the Transfer Options as the transfer method.

You can now start the immediate transfer by clicking Review. This will transfer the public_html folder to Dropbox. Once done, you can create Monthly schedule to automate this backup task monthly. Just click Monthly > select Date and Time > Finalize and Run.

Note: If you want to use weekly or daily backup, you need to upgrade your subscription as stated in the website. If you do, do not forget to change the cron job setting according to your backup schedule. Another thing, the PHP script will delete all previous cPanel backup before it generate new backups. This to make sure your backup will not eat up much disk space.

For more backup solutions check out these following:

• 17 Online Tools to Backup and Sync your Files, and
• Best Backup Solutions for WordPress.

Related posts:

1. How to Sync Any Folders Outside /Dropbox [Quicktip]
2. Automate Your Dropbox Files With Actions
3. WordPress Database and Files Backup Solutions – Best of
4. 17 Online Data Backup & Synchronization Tools

[Windows only] You have just played a video on your browser, streaming from a website like Youtube and was wondering how to save the video file on your computer. Unless there’s a save button on the video, you need to find a video downloader which would cost you double the bandwidth usage.

There are many video downloaders out there available as extensions to your browsers, you can simply download a video on any website by providing the video link, or by clicking on an extension download button that would appear somewhere on your browser.

What we are going to share in this article however is a different approach. Instead of first view, then download which doubles your bandwidth usage), VideoCacheView allows you to simply view any video on the Web then save it to your computer right away. What VideoCacheView does is collect all the video files from your browser cache folder and list them in an application window so you can access and save them without having to play it back from the Web.

Save Video Files From Cache Folder

To start saving videos you play on the web, go to the VideoCacheView website and scroll down until you see the download link, download the zip file to your Desktop for easier access or anywhere within your computer. The file unzipped should look like this:

Now play any video on the web, or if you have not cleared your browser cache since the last time you viewed a video, you can then open the VideoCacheView application. Click ‘Run’ to run the application.

When you run the application, you will see a list of videos played on your browser, ignoring the name, highlight the video of choice and click the ‘play’ button to preview the video, and click the ‘Copy selected files to’ button to save the video file.

Once you decided to save the video file and click the save button, a popup window will appear. Select the location you want to save the file to, check the necessary boxes to prevent duplicates and name the file accordingly.

That’s all you need to do; your file is now saved in the selected folder. Open the folder and you will see list of files you have saved.

Conclusion

If you are using other browser extensions to save the video files played on browser, saving the video will require a download process. With VideoCacheView you can feed your video junkie obsession and make collections of any video that is available on the Web.

Related posts:

1. How To Download Your Data Stored Within Google Products [Quicktip]
2. How to Transfer iOS Screenshots To Your Mac Easily [Quicktip]
3. Automate Your Dropbox Files With Actions
4. How to Create New Folders in Windows by Drag & Drop [Quicktip]