"Adding a button" (#2634533) / PenciDesign

Comments

almondsurf started the conversation
December 17, 2020 at 4:24am
A simple question that should be obvious, but isn't to me right now...

How do I simply add a styled button with hover action like the contact and newsletter?

Is there a snippet or quick code to add a button to any page/post?
2,701
PenciDesign replied
December 17, 2020 at 3:46pm
Hi,

Please check option for it via Customize > General > Colors > General Buttons.. options
Also, you should update your theme to latest version 7.6.1 by do follow this guide

Best Regards,

PenciDesign
almondsurf replied
December 22, 2020 at 3:33pm
Thank you for your reply, and for the suggestion to update my theme. That will be done asap.

I have been working with the colors in Customize > General > Colors, but I was wondering if you have a "shortcode" or something to pull the theme colors and specific CSS code in for a button (like in the 2.png image attached in the post question)?

When I add a <button> tag in the widget there is no themeing applied. Do I have to make my own button class or ID and theme them in Customize > Custom CSS when making a button?

2,701

PenciDesign replied

December 23, 2020 at 2:26am

Hi,

As I can see - you're using a custom button just to link for an URL. So, I think you can use HTML like that to create a button with styles:

<button type="submit">Click me!</button>

or:

simple use a HTML like that:

<a class="penci-general-button" href="http://sugarfreemomandme.com/contact-us/">Contact US</a>

And add more this code to Customize > Custom CSS to style for this button:

a.penci-general-button {
    display: block;
    width: 100%;
    font-size: 14px;
    padding: 12px 20px;
    color: #313131;
    margin: 0;
    cursor: pointer;
    border: none;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    background: #F5F5F5;
    line-height: 1;
    text-align: center;
    font-weight: 500;
}
a.penci-general-button:hover{
    color: #fff;
    background-color: #818181;
    border-color: #818181;
}

Hope this helps,

Best Regards,

PenciDesign

almondsurf replied
December 23, 2020 at 2:40am
Penci Team, you guys are great. Thank you for your reply. This answers my question.

I was wondering if the theme included a shortcode to add a button that conforms to the styling in the Customizer... It appears that there is not any such shortcode with your theme.

I will style one as suggested. Thank you again.
2,701
PenciDesign replied
December 23, 2020 at 3:04am
Hi,
Yes, the theme supports for Button shortcode.
You can create a button shortcode by use Classic Block- check this image to know where is Classic Block
After that, see the Button shortcode from Classic block here

Best Regards,
PenciDesign
almondsurf replied
December 23, 2020 at 4:50pm
Can you help me understand why the text will not transition to White (#fff) upon :hover?

Found in Footer 1 @: http://sugarfreemomandme.com/contact_us/

Here is the CSS I have included in my Custom CSS:

/* Button Syling */

a.penci-general-button {
display: block;
width: 100%;
font-family: Montserrat, sans-serif;
text-transform: uppercase;
font-size: 14px;
padding: 12px 20px;
color: #313131;
margin: 0;
cursor: pointer;
border: none;
transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
background: #F5F5F5;
line-height: 1;
text-align: center;
font-weight: 500;
}
a.penci-general-button:hover{
text-decoration: none;
color: #fff;
background-color: #818181;
border-color: #818181;
}
/* I've added "color: #fff !important;" to the :hover class above, which solved the issue, but I'm wondering why it won't change color upon :hover without the !important rule. */

2,701

PenciDesign replied

December 24, 2020 at 1:47am

Hi,

If you're using this button inside posts, the CSS for links can override it.

So, you can change the code to:

/* Button Syling */
a.penci-general-button,
.post-entry a.penci-general-button {
    display: block;
    width: 100%;
font-family: Montserrat, sans-serif;
text-transform: uppercase;
    font-size: 14px;
    padding: 12px 20px;
    color: #313131;
    margin: 0;
    cursor: pointer;
    border: none;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    background: #F5F5F5;
    line-height: 1;
    text-align: center;
    font-weight: 500;
}
a.penci-general-button:hover,
.post-entry a.penci-general-button:hover{
    text-decoration: none;
    color: #fff;
    background-color: #818181;
    border-color: #818181;
}

Hope this helps,

Best Regards,

PenciDesign