Discussion on Puerto - Responsive Flat Buttons


puertokhalid supports this item


12 comments found.

Awesome!, I just get it after see the screenshots man…

looks amazing, pretty solid, I love how it looks on high definition and retina screens…

A would like if you add some classic hover state like changing the color or something like that… but that is something that I will do for my project.

I wish you a lot of sales. And I am the first buyer and I’m pretty happy with the product.

I did some hover animation. Thanks a lot. I’m glad you like this flat buttons. And I am very happy for your comment.

I am buy this buttons But RTL left to right How i am RTL right to left? please help me!

I’ve modified the stylesheet for you. Would you please giving me your E-mail to send you the modified stylesheet. http://puertokhalid.com/up/rtl_buttons.png

I’m receive your email thanks for fast support

Great. I’m glad that I could help you and thanks for purchasing my item.

Hi I am trying to include this on my website. www.techpicks.net and I am having some trouble I am using Weebly with HTML or CSS editor I guess. I am not very good with coding.

Thank You

Hi! What kind of trouble do you have?

Sorry for the late responds I don’t have very good coding experience I don’t know where exactly to put the code

Hi, what’s the best way to use new icons with classes? Do I have to edit font-awesome.min.css and add them there according the font-awesome site?


Autoreply, I was trying to use an icon that is available in the new version of Font awesome, I’ll need to update the font files.

Many thanks!

Hi, how can I make these buttons responsive?

I want that when they are shown in a mobile screen they appear one below the other.

Many thanks!

Hi, great buttons. I have added them to my site.

All looking good but the icons justify to the top of the circle in radius puerto-btn-1 when i upload the site live. Which line of code do i need to change to make them centred?


Hi There! You can edit the line 52 from main.css, But for me the icons in the center!

Hi there, so line 52 is line height? I have tweaked that but it doesnt seem to make any impact on the live appearance of the page. Would there be another bit of coding within my page that could affect the icon position. When i rollover it starts centred in the box but it moves to a position that is justified to the top of the circle. This is my code for the buttons


And this is the css for the navigation div

navigation {

height: 62px; float: left; width: 870px; margin-top: 2px; background-color: #4c4c4c; opacity: 1.0; margin-left: 0px; padding-left: 30px; padding-top: 18px; }

Is there anything obvious that i’ve done wrong?

..ok it didn’t show the code in my reply….

Dear Creator,

I am having a few problems with the hover effect on my website and cannot seem to fix it.

Your help would be greatly appreciated if possible.

You can see it in action at https://ivesitconsulting.co.uk/ (In the header – My.IIC)

Hi Dear! Thank you for purchasing my item.

Please do the following to fix your problem: From this file css/main.css, search for thsi line 189:

.puerto-btn-1 span i, .puerto-btn-2 span i, .puerto-btn-3 span i, .puerto-btn-4 span i {

and add this code immediately after the previous line: margin-top: 5px;

now look at the line 62 for this code: padding: 11px 20px;

and edit it to this: padding: 9px 20px;

Can your buttons be styled with % widths for responsive designs or do they use fixed pixel widths? Thanks.

Yes it can be with % widths.
Thank you.

Thank you Khalid for these great buttons and your support. They look perfect in my Wordpress theme, without the need of extra plugins.

My pleasure, thank you so much!

Author not at all replying. I don’t know why he has taken money for support. Total waste!

I’ve sent you an email.

Thank you!

But, nothing is there in the email. You’ve provided documentation in a file but it is useless. You’ve not shown anything where to put the code and how to implement it. Provide me a provide documentation.

I’ve sent you another email with more details and instructions for using item.

Thank you!

Hi – On Firefox the Icon Animation is flickering. In Chrome it’s fine. How can I fix that?

Hi! Love these. Do you have basic instructions on applying the code to a website?

Hi, thank you for purchasing. There’s a documentation for that.