Skip to main content

Puerto CSS3 - Responsive Flat Buttons Collection


Puerto CSS3 - Responsive Flat Buttons




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..










Labels:

Comments

Post a Comment

Feel free to leave your message here.

Popular posts from this blog

Bouncy Content Filter for big Website

This space-saving content filter allows the users to switch from one category to the other in a fancy way! Each click fires the rotation of the gallery images, revealing the items belonging to the selected category. Content filters  are particularly useful for big websites, where each pixel counts. Lets say you are showing the “ last products ” of your e-commerce . How about giving the users the option to switch to the “most popular” products without a page refresh? A good solution could be to hide the “most popular” items right behind the “last products”, then use the power of CSS3 3D Transforms to rotate the items when the user switches from one option to the other. The bounce effect is optional, but you get the idea! The rotation won’t work on older browsers like IE9, but the experience won’t be broken – just a display on/off with no transitions. Lets dive into the code! Creating the structure We wrapped the filter into a <nav> element. The filter structur...
Post a Comment
Read more

Content slider with Zoom Effect for a predefined area in each slide

Zoom Slider Today’s Blueprint is a simple content slider with depth-like zoom functionality. Each slide has a predefined zoom area that will be used to calculate the appropriate scale value for a fullscreen fill. Once the icon for zooming is clicked, the zoom area as well as the page get scaled, creating the illusion that the viewer is approaching the item. Once the whole page is covered, we show some more details. Navigating the slider will animate the inner parts of the slide, allowing for an independent control of the image area and the title. We are using CSS transitions and dymanic.js for moving the slide elements. Dymanic.js by Michaël Villar is a JavaScript library to create physics-based animations. Please note that we are using a couple of modern CSS properties, so only contemporary browsers are supported. The HTML <!-- Main container --> <div class="container"> <!-- Blueprint header --> <header class="bp-header cf"> ...
Post a Comment
Read more

An AJAX Based Shopping Cart with Drap Drop Item Effect

An AJAX Based Shopping Cart In this tutorial we will create an AJAX Based Shopping Cart with Drag and Drop feature.You can easily use this shopping cart in you store.All the products are going to be stored in a MySQL database, with PHP showing and processing the data. So go ahead, download the demo files and start reading. Step 1 – the MySQL Database If you want to set up a working demo, you’ll need to execute the following SQL code in your database manager (e.g. phpMyAdmin). It will set up the table and insert a few products. The code is also available in table.sql in the demo files. table.sql CREATE TABLE IF NOT EXISTS `internet_shop` ( `id` int ( 6 ) NOT NULL auto_increment, `img` varchar ( 32 ) collate utf8_unicode_ci NOT NULL default '' , `name` varchar ( 64 ) collate utf8_unicode_ci NOT NULL default '' , `description` text collate utf8_unicode_ci NOT NULL , `price` double NOT NULL default '0' , PRIMARY K...
Post a Comment
Read more