Hello,
I would like to know how do I change the button width on this page (the BUY NOW button):
http://www.damnkicks.com/grain-audio-oehp-on-ear-headphones-save-25
I would like to make it full width, basically the same width the text has. Also how could I change the colors and make the background red and then change to black once you put the mouse above?
Thanks
Hello,
Please use this code on posts and change the url to your preferred one:
[vc_btn title="Buy now" color="danger" size="lg" align="center" link="" button_block="true"]
Then use this css in the theme panel-> custom css box:
.vc_btn3.vc_btn3-color-danger.vc_btn3-style-modern:hover{
border-color: black;
background-color: black;
}
Thank you!
Hi Bogdan,
Thank you so much for your answer. However, I really like the look and feel of the other button, is it anyway to make that button full width (it’s ok about the black color and red once you are above).
On another side, is it danger the only color I can change or I can actually use the theme color I have?
#e51c20
Thanks!
If you want to change the button style you can follow this guide: https://forum.tagdiv.com/increase-users-engagement-add-custom-buttons-posts/
Thank you!
Hi Bogdan,
“2. size=”” – The size section supports the following sizes: mini, small, normal and large. To make it a large button just enter the code like this: size=”large”
I would like to make it full width, but no info on how to do so in the page you sent me. What would I have to add in order to make it?
Thanks
Hello,
It seems the buttons on posts are a bit different from the one I exemplified, that use visual composer. Another technique to add a button to your site is create it in visual composer and then simply copy over the shortcode from visual composer into the post content in text mode. That is how i provided the first example for the button.
http://screencast.com/t/6fbs0b5HoG9F
Thank you!
Dear Bogdan,
Thank you so much for your help. I have already done it an looks really good! Just missing 2 things…
The first one, how can I make the “BUY NOW” button bigger size? (see example below)
http://www.damnkicks.com/nike-air-max-90-utility/
As a reference, this is the code I currently have for the button:
<div class=”vc_column-inner “><div class=”wpb_wrapper”><style type=”text/css”>.vc_btn3-style-gradient-custom.vc_btn-gradient-btn-5835c50785a35:hover{color: #ffffff;background-color: #e51c20;border: none;background-position: 100% 0;}</style><style type=”text/css”>.vc_btn3-style-gradient-custom.vc_btn-gradient-btn-5835c50785a35{color: #ffffff;border: none;background-color: #ba2a2a;background-image: -webkit-linear-gradient(left, #ba2a2a 0%, #e51c20 50%,#ba2a2a 100%);background-image: linear-gradient(to right, #ba2a2a 0%, #e51c20 50%,#ba2a2a 100%);-webkit-transition: all .2s ease-in-out;transition: all .2s ease-in-out;background-size: 200% 100%;}</style><div class=”vc_btn3-container wpb_animate_when_almost_visible wpb_bottom-to-top vc_btn3-center vc_custom_1479918720170 wpb_start_animation”><i class=”vc_btn3-icon fa fa-shopping-cart”></i> BUY NOW</div>
</div></div>
On the other hand, the button doesn’t show up the icon I selected (it looks good here for example:
http://www.damnkicks.com/send-us-images). How can I do it, it’s really important for me.
Thank you so much!
Hi,
The icon does not appear maybe because one is a page and the other link is a post. Visual composer was not meant to be used on posts in our theme so not all elements will work properly on posts.
You cannot make the button bigger as it already is at the container’s limit size of 696 pixels.
If you want it bigger you will have to remove the sidebar. If you use a sidebar on your post or page, the main content will only be 696 pixels. If no sidebar is used it will be 1068 px.
As for the icon, visual composer uses font awesome icons so try to install font awesome and see if it will show up as I can see the html tag in order. It could work.
Thank you!
Hi Bogdan,
I have already installed the font, but no luck so far. Do I have to do any change on the code? Regarding the size, I just meant about the words “BUY NOW” not the button itself. How would I do it just to make the “BUY NOW” text bigger?
THANKS!
If just the text is what you are after, you can try this css code:
.vc_btn3-container.vc_btn3-center .vc_btn3-block.vc_btn3-size-lg{
font-size:30px!important;
}
I have tested the button on one of my posts but the cart icon appeared without problems on posts also, thre could be something affecting the fonts on your posts. Please disable all plugins except visual composer, clear cache and reset cdn files.
Let us know how it goes.
