Hello,
i want to know how to show a full width button at the end of any block in visual composer. please check the below mentioned page. i want the view all button to be as full width at the end of each block.
Regards
Hello,
The buttons you see on the site you mention are visual composer buttons: http://screencast.com/t/u4TzvA2d4pL but they cannot be made full width. Visual composer does not offer such setting. Sorry.
Thank you!
Thanks for the response ,please let me know if there is any other work around to add a full column button or link at the bottom of the block .
Thanks in advance
Hello,
Custom buttons can be made with html and css. You can try it like so:
create a raw html element below the block and add this code to it:
<div class="fullwidth">
<a href="https://www.google.ro">My custom button</a>
</div>Then add this css in the page settings:
.fullwidth{
background-color:red;
border-radius:10px;
padding: 5px 0;
}
.fullwidth a{
display:block;
width:100%!important;
text-align:center;
color:black!important;
}http://screencast.com/t/RYLXN9Gsn
This will be the result: http://screencast.com/t/BzNmoKYAdVip
Thank you!
Hi,
first of all i want to really appreciate the amount of support you guys provide to the users.
i think some code is missing in the above code snippet which i need to put in raw html block. please check. and for hover do i need to just add
.fullwidth a:hover {
background-color: yellow;
}
Regards
Hi,
Now it should be OK. The forum actually rendered the code instead of displaying it.
For the hover you will have to add the hover on the whole container if you want the whole button to change color like so:
.fullwidth:hover {
background-color: yellow;
}
Your version of the code would only highlight the a tag which looks like so:
http://screencast.com/t/VCAfHfMCHTc0
Thanks!
Hi,
Thanks its working fine now. the only issue the link and hover effect is only working if i move the mouse at the bottom of the block. but if i move the mouse in the center or top of the block then it the link and hover is not working.
Regards
please ignore the last message. its ok now.
Thanks for the support.
Regards
