Jump to content

Archived

This topic is now archived and is closed to further replies.

illinimatt81

Flat Buttons

Recommended Posts

illinimatt81

Is there a way to achieve flat buttons with the pagelines button shortcodes? I think I have seen it done on other pagelines sites.

Share this post


Link to post
Share on other sites
jmad

Yep.  This sample isn't flat buttons but it's the code I had quickly available.  These are outlined buttons.  Use the CSS in Custom CSS

 

Then you can use [pl_button type="btn" link="" target="blank"]Default[/pl_button] and sub "btn-clear" for "btn" 

or you could use the btn-clear in html.   Either way should work on WP pages or in DMS text boxes, etc.  To change the buttons for hero and callout sections there are some other things that need done I think...been a while since I did that though.  If you need I can try to recall.

 

 

/* clear button */

.btn-clear{

  -webkit-border-radius: 5;

  -moz-border-radius: 5;

  border-radius: 5px;

  font-family: Muli;

  color: rgb(265,265,265);

  background: rgba(0,0,0,0);

  padding: 10px 20px 10px 20px;

  border: solid #ffffff;

  border-width: 2px;

  min-width: 150px;

 

}

 

.btn-clear:hover {

  color: rgba(265,265,265,0.7);

  text-shadow: none;

  background: rgba(0,0,0,0);

  border: solid rgba(265,265,265,0.7); 2px;

}

Share this post


Link to post
Share on other sites
illinimatt81

I'll try this out and report back!

Share this post


Link to post
Share on other sites
jmad

Good Luck.  

 

Here are two other posts that I started regarding this topic one of them covers changing the buttons in Hero and Callout.  Looking back I was just getting started with DMS and might seem a little dense...anyway hope they help.  

 

Not really why we shouldn't overwrite DMS's built-in buttons other than if they are clear you can't see them in the DMS options editor...maybe Danny can enlighten us on that as it would seem much easier and neater to do that than build extra buttons...overwriting the core buttons would also mean that then any plugins such as WooCommerce or Contact forms should pick up that button and save users from having to write CSS for each plugins buttons.

 

http://forum.pagelines.com/topic/30278-button-shortcode-colors/

 

http://forum.pagelines.com/topic/31563-buttons-and-colors-in-dms/

Share this post


Link to post
Share on other sites
Danny

illinimatt81 - I added a doc to the old PageLines Frameworks docs, a guide on how to create your own buttons. You can use the same method in DMS, you can find the doc here - http://support.pagelines.me/docs/customization/create-custom-buttons/

All you will want to do is instead of using gradients via the LESS mixin, just use solid colors instead. If you want some nice flat colors, use this site as a resource - http://flatuicolors.com/


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
illinimatt81

I'm experimenting on my dev site and having success. Thank you jmad"] for the code and @[member="Danny for the great flat colors resource! Exactly what I was looking for.

Share this post


Link to post
Share on other sites

×