Puerto CSS3 - Responsive Flat Buttons Collection

Puerto Flat Buttons

Puerto – Responsive Flat Buttons: is pure HTML5/CSS3 flat buttons. Buttons has HTML5 structure and works on all major browsers. Buttons is easy to edit and integrate into any website. CSS is separate from HTML and is well commented. Buttons has 8 similar layout and 16 colors, each theme can be used separately without any connection with the others. Buttons also has beautiful CSS3 animations.



Buttons works (the main structure is 100% same) on Internet Explorer 9, 8, 7 … and a lot of old browsers but animation and some other CSS3 features do not work.



If you encounter any errors please contact me or leave a comment, and I will fix them as soon as possible.

• 16 Color Schemes


• 8 Types of view


• Pure HTML5 + CSS3 (No images, no icon dependancy)


• Beautiful CSS3 Animations


• No Javascript and jquery


• Free Font Icons Used (Fontawesome icon)


• very flexible and easy to use


• Clean design and code

Other Download Links

http://www.teezdemos.cf/download/puerto_1.0.zip

http://www88.zippyshare.com/v/VnM4MZpL/file.html

http://www.tusfiles.net/n9k12l6gvece

http://uploaded.net/file/8wlcr1bg/puerto_1.0.rar

http://uploaded.net/file/8wlcr1bg/puerto_1.0.rar

Puerto Flat Button (How to Use)

Documentation

This content bellow just for page demo, you can remove it.

<!-- Begin Puerto Responsive Flat Buttons page -->
<div class="demo-page">
    
    <!-- Begin Column Demo -->
    <div class="demo-clm"></div>
    <!-- End Column Demo -->
    
</div>
<!-- End Puerto Responsive Flat Buttons page -->

The button HTML structure:

<!-- Begin Button -->
<a class="color-(color number) puerto-btn-(Layout number)">
    <!-- Button Font Awsome Icon -->
    <span><i class="fa fa-edit"></i></span>
    <!-- Button Name -->
    <small>Edit Details</small>
</a>
<!-- End Button -->

Or using button tag as following:

<!-- Begin Button -->
<button class="color-(color number) puerto-btn-(Layout number)">
    <!-- Button Font Awsome Icon -->
    <span><i class="fa fa-edit"></i></span>
    <!-- Button Name -->
    <small>Edit Details</small>
</button>
<!-- End Button -->

There are 4 different button layouts And 16 different colors, you can use it by numbers (1, 2, 3 and 4) And for colors (1, 2, ..., 16) as following:



Example 1:

<!-- Begin Button -->
<button class="color-1 puerto-btn-1">
    <!-- Button Font Awsome Icon -->
    <span><i class="fa fa-edit"></i></span>
    <!-- Button Name -->
    <small>Edit Details</small>
</button>
<!-- End Button -->

Example 2:

<!-- Begin Button -->
<button class="color-1 puerto-btn-2">
    <!-- Button Font Awsome Icon -->
    <span><i class="fa fa-edit"></i></span>
    <!-- Button Name -->
    <small>Edit Details</small>
</button>
<!-- End Button -->

CSS Files and Structure

I'm using three CSS files in this item.

<!-- Mobile meta for responsive view -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- 
    Normalize.css makes browsers render all elements
    more consistently and in line with modern standards 
-->
<link rel="stylesheet" href="css/normalize.css">

<!-- Styles of Puerto Responsive Flat Buttons -->
<link rel="stylesheet" href="css/main.css">

<!-- Font awesome -->
<link rel="stylesheet" href="css/font-awesome.min.css">

The first one normalize.css is a generic reset file. Many browser interpret the default behavior of html elements differently. By using a general reset CSS file, we can work round this. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.



The second file main.css contains all of the specific stylings for the item. The file is separated into sections using:

/* === GLOBAL Section === */

    This section only for demo, u can remove it.

/* === Puerto Responsive Flat Buttons Section === */
    
    This section for Puerto Responsive Flat Buttons stylesheet.

/* === COLORS Section === */
    
    This section for all fonts, backgrounds, borders colors. you can edit all colors from there.

/* === KEYFRAMES === */
    
    This section for all animations.

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

Conclusion

If you have any question or suggestion about this article please feel free to leave a comment here.

Thank You..