Archived

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

  • 0

Full width Buttons

Question

Posted · Report post

I made a button :

 

[pl_button type="important" link="http://www.thomashoben.com/resources/schedule-a-consultation/" ]
Schedule an Informational Consultation
[/pl_button]

 

And placed it in a box on the home page @ thhp://www.thomashoben.com   

 

I would like it to stretch the width of the Content Area (left of the Side Bar).

 

Is a button in a box the best way to get this look and how would I make it expand to the correct width (100%) ?

 

I am planning on putting the same looking clickable buttons in the footer columns so I would need something that will work there as well.  I currently have Text Widgets in the Footer Column Sidebar.

 

Thanks. 

 

Sample site that of the look they are trying to achieve (orange buttons)  http://www.recoveryoptions.us/

Share this post


Link to post
Share on other sites

7 answers to this question

Posted · Report post

No you'll need to apply the display:block with CSS in the Custom CSS area, or inline like this;

 

 


<a href="http://www.thomashob...inking-alcohol/" class="btn btn-important" style="display:block;">Take the Readiness Quiz</a>

Share this post


Link to post
Share on other sites

Posted · Report post

<div class="btn-group">
  <a class="btn btn-important dropdown-toggle" data-toggle="dropdown" style="display:block;" href="#">
    Login Links
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    [menu name="Login Links"]
  </ul>
</div> 

Changed my mind on the split button and decided on a regular dropdown button.  Here's my code but it doesn't span the width of the sidebar using the block style.  I also tried the btn-block as a class and it didn't work either.  Any other recommendations to make it work? 

 

 

Share this post


Link to post
Share on other sites

Posted · Report post

Hi maureen1671

Please you try 

.btn-important {
    padding-left: 80px;
    padding-right: 80px;}

Share this post


Link to post
Share on other sites

Posted · Report post

Nah use display:block.

 

P.S-  FYI you have some JS errors on your site, including jquery 1.5.1 which is badly outdated.

Share this post


Link to post
Share on other sites

Posted · Report post

Can you use this with a split button dropdown?  What is the class for the split button btw and how would you set that up?

Share this post


Link to post
Share on other sites

Posted · Report post

<p>Ok, I did this in the &lt;&gt;Custom Code, CSS/LESS rules and it great, thank you!:<br />

<br />

<br />

.btn-important {<br />

display:block;}<br />

<br />

<br />

PS: I love the hat....and the blink</p>

Share this post


Link to post
Share on other sites