[container section_title=’Page Title’ fullwidth=’yes’ textalign=’center’ bgimage=’http://bravio.co/demos/default/wp-content/uploads/2017/11/header_bg3.jpg’ scrolltype=’scroll’ bgcolor=’accent’ bgtransparency=’40’ gradientstart=’#000000′ gradientend=’accent’ gradtype=’left’ top=’100′ bottom=’125′ innerbottomshadowsize=’0′ bordertop=’0′ borderbottom=’0′ bbcolor=’#efefef’ topseparator=’disable’ topseparatorshape=’clouds’ topseparatorcolor=’#ffffff’ bottomseparator=’enable’ bottomseparatorshape=’clouds’ bottomseparatorcolor=’#ffffff’ mobiletop=’70’ mobilebottom=’50’ collapse=’true’][column type=’12’ last=’1′][text color=’#ffffff’ fontsize=’16’ fontfamily=’Raleway’ letterspacing=’7′ animation=’fadeInUp’]Fastest & Easiest[/text][separator margintop=’10’ align=’left’ animation=’default’][/separator][text google_font=’Raleway:300,700′ color=’#ffffff’ fontsize=’50’ fontweight=’300′ lineheight=’60’ animation=’fadeInUp’ animation_delay=’0.1s’ mobilefontsize=’30’ mobilelineheight=’35’]Bravio Button Element[/text][separator margintop=’15’ align=’left’ animation=’default’][/separator][text color=’#ffffff’ fontsize=’16’ animation=’fadeInUp’ animation_delay=’0.3s’]Drag and Drop Elements
Save & Load Layouts, Elements, Containers & Rows[/text][separator margintop=’30’ align=’left’ animation=’default’][/separator][button size=’xlarge’ shape=’flat’ link=’http://themeforest.net/item/bravio-ultimate-wordpress-theme/14231824?ref=Bravio’ bgtransparency=’10’ bordertransparency=’0′ iconposition=’before’ inset=’0′ lrpadding=’20’ border=’1′ bordercolor=’#ffffff’ bgovercolor=’#000000′ animation=’fadeInUp’ animation_delay=’0.4s’]Buy Bravio Today![/button][/column][/container][container section_title=’Container’ fullwidth=’yes’ scrolltype=’fixed’ bgtransparency=’0′ top=’70’ bottom=’40’ innerbottomshadowsize=’0′ bordertop=’0′ borderbottom=’0′ topseparator=’disable’ topseparatorshape=’diagonal’ bottomseparator=’disable’ bottomseparatorshape=’diagonal’ collapse=’true’][column type=’one_fifth’][content_box style=’5′ size=’small’ iconcolor=’#c7d2d5′ rollovericoncolor=’primary’ button=” button_link=’#’ animation=” animation_duration=” title=’Mini Size’ icon=’fa-arrows-alt’]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim.[separator marginTop=’15’][/separator][button link=’#’ size=’mini’ shape=’round’ icon=” fontfamily=’Open Sans’ fontweight=’bold’ iconcolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=’accent’ bgovercolor=’primary’ bgtransparency=” textcolor=’#ffffff’ textovercolor=’#ffffff’ textshadow=” border=” bordercolor=” borderovercolor=” hovereffect=”]Button[/button][button link=’#’ size=’mini’ shape=’flat’ fontfamily=’Open Sans’ fontweight=’bold’ icon=” iconcolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=’primary’ bgovercolor=’accent’ bgtransparency=” textcolor=’#ffffff’ textovercolor=’#ffffff’ textshadow=” border=” bordercolor=” borderovercolor=” hovereffect=”]Button[/button][/content_box][/column][column type=’one_fifth’][content_box style=’5′ size=’small’ iconcolor=’#c7d2d5′ rollovericoncolor=’primary’ button=” button_link=’#’ animation=” animation_duration=” title=’Small Size’ icon=’fa-arrows-alt’]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.[separator marginTop=’30’][/separator][button link=’#’ size=’small’ shape=’round’ fontfamily=’Open Sans’ fontweight=’bold’ icon=” iconcolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=’accent’ bgovercolor=’primary’ bgtransparency=” textcolor=’#ffffff’ textovercolor=’#ffffff’ textshadow=” border=” bordercolor=” borderovercolor=” hovereffect=”]Button[/button][button link=’#’ size=’small’ shape=’flat’ fontfamily=’Open Sans’ fontweight=’bold’ icon=” iconcolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=’primary’ bgovercolor=’accent’ bgtransparency=” textcolor=’#ffffff’ textovercolor=’#ffffff’ textshadow=” border=” bordercolor=” borderovercolor=” hovereffect=”]Button[/button][/content_box][/column][column type=’one_fifth’][content_box style=’5′ size=’small’ iconcolor=’#c7d2d5′ rollovericoncolor=’primary’ button=” button_link=’#’ animation=” animation_duration=” title=’Medium Size’ icon=’fa-arrows-alt’]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.[separator marginTop=’22’][/separator][button link=’#’ size=’medium’ shape=’round’ icon=” iconcolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=’accent’ bgovercolor=’primary’ bgtransparency=” textcolor=’#ffffff’ textovercolor=’#ffffff’ textshadow=” border=” bordercolor=” borderovercolor=” hovereffect=”]Medium Button[/button][/content_box][/column][column type=’one_fifth’][content_box style=’5′ size=’small’ iconcolor=’#c7d2d5′ rollovericoncolor=’primary’ button=” button_link=’#’ animation=” animation_duration=” title=’Large Size’ icon=’fa-arrows-alt’]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor ncididunt ut labore et dolore magna.[separator marginTop=’12’][/separator][button link=’#’ size=’large’ shape=’round’ icon=” iconcolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=’primary’ bgovercolor=’accent’ bgtransparency=” textcolor=’#ffffff’ textovercolor=’#ffffff’ textshadow=” border=” bordercolor=” borderovercolor=” hovereffect=”]Large Button[/button][/content_box][/column][column type=’one_fifth’ last=’1′][content_box style=’5′ size=’small’ iconcolor=’#c7d2d5′ rollovericoncolor=’primary’ button=” button_link=’#’ animation=” animation_duration=” title=’Extra Large’ icon=’fa-arrows-alt’]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.[separator marginTop=’24’][/separator][button link=’#’ size=’xlarge’ shape=’round’ icon=” iconcolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=’accent’ bgovercolor=’primary’ bgtransparency=” textcolor=’#ffffff’ textovercolor=’#ffffff’ textshadow=” border=” bordercolor=” borderovercolor=” hovereffect=”]Extra Large[/button][/content_box][/column][/container][container section_title=’Button Shapes’ fullwidth=’yes’ textalign=’center’ textcolor=’#555555′ scrolltype=’fixed’ bgcolor=’#f9f9f9′ bgtransparency=’0′ top=’140′ bottom=’150′ innerbottomshadowsize=’0′ bordertop=’0′ borderbottom=’0′ bbcolor=’#efefef’ topseparator=’enable’ topseparatorshape=’circle’ topseparatorcolor=’#ffffff’ bottomseparator=’enable’ bottomseparatorshape=’circle’ bottomseparatorcolor=’#ffffff’ mobiletop=’70’ mobilebottom=’60’ collapse=’true’][column type=’12’ last=’1′][title size=’6′ fontsize=’25’ fontweight=’300′ style=’none’ animation=’bounceInLeft’ textcolor=’#444444′]Stylish Button Shapes[/title][separator marginTop=’1′][/separator][text color=’accent’ fontsize=’14’]5 Different Shapes[/text][separator style=’1′ align=’center’ color=’#555555′ height=’2′ marginTop=’15’ marginBottom=’15’ width=’50’][/separator][text fontsize=’16’]Bravio Buttons are truly made with love, giving you tons of options to make stylish buttons according to latest web trends with pure CSS.They are cross browser and look awesome on all major browsers.[/text][separator marginTop=’50’][/separator][button size=’medium’ shape=’flat’ link=’#’ bgtransparency=’0′ iconposition=’before’ inset=’1′ border=’1′ bgcolor=’accent’ textcolor=’#ffffff’ bordercolor=’accent’ bgovercolor=’primary’ textovercolor=’#ffffff’ borderovercolor=’primary’ animation=’default’]Flat Button[/button][button link=’#’ size=’medium’ shape=’round’ icon=” iconcolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=’accent’ bgovercolor=’primary’ bgtransparency=” textcolor=’#ffffff’ textovercolor=’#ffffff’ textshadow=” border=’1′ bordercolor=’accent’ borderovercolor=’primary’ hovereffect=”]Round Button[/button][button link=’#’ size=’medium’ shape=’pill’ icon=” iconcolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=’accent’ bgovercolor=’primary’ bgtransparency=” textcolor=’#ffffff’ textovercolor=’#ffffff’ textshadow=” border=’1′ bordercolor=’accent’ borderovercolor=’primary’ hovereffect=”]Pill Button[/button][button link=’#’ size=’medium’ shape=’shield’ icon=” iconcolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=’accent’ bgovercolor=’primary’ bgtransparency=” textcolor=’#ffffff’ textovercolor=’#ffffff’ textshadow=” border=’1′ bordercolor=’accent’ borderovercolor=’primary’ hovereffect=”]Shield Button[/button][button link=’#’ size=’medium’ shape=’skew’ icon=” iconcolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=’accent’ bgovercolor=’primary’ bgtransparency=” textcolor=’#ffffff’ textovercolor=’#ffffff’ textshadow=” border=’1′ bordercolor=’accent’ borderovercolor=’primary’ hovereffect=”]Skew Button[/button][/column][/container][container collapse=’true’ fullwidth=’no’][column type=’12’ last=’1′][separator marginTop=’80’][/separator][/column][/container][container section_title=’Cool 3D Buttons’ fullwidth=’yes’ scrolltype=’fixed’ bgtransparency=’0′ innerbottomshadowsize=’0′ bordertop=’0′ borderbottom=’0′ topseparator=’disable’ topseparatorshape=’diagonal’ bottomseparator=’disable’ bottomseparatorshape=’diagonal’ collapse=’true’][column type=’9′][title]Cool 3D Buttons[/title][separator marginTop=’20’][/separator][text]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.[/text][separator marginTop=’30’][/separator][button link=’#’ size=’medium’ shape=’flat’ icon=” iconcolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=’#ed5565′ bgovercolor=’#da4453′ bgtransparency=” textcolor=’#ffffff’ textovercolor=’#ffffff’ textshadow=” border=” bordercolor=” borderovercolor=” tdbordercolor=’#da4453′ tdborderovercolor=’#912f39′ hovereffect=”]3D Flat Button[/button][button link=’#’ size=’medium’ shape=’round’ icon=” iconcolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=’#fc6e51′ bgovercolor=’#e9573f’ bgtransparency=” textcolor=’#ffffff’ textovercolor=’#ffffff’ textshadow=” border=” bordercolor=” borderovercolor=” tdbordercolor=’#e9573f’ tdborderovercolor=’#a13c2b’ hovereffect=”]3D Round Button[/button][button link=’#’ size=’medium’ shape=’pill’ icon=” iconcolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=’#a0d468′ bgovercolor=’#8cc152′ bgtransparency=” textcolor=’#ffffff’ textovercolor=’#ffffff’ textshadow=” border=” bordercolor=” borderovercolor=” tdbordercolor=’#8cc152′ tdborderovercolor=’#658c3b’ hovereffect=”]3D Pill Button[/button][button link=’#’ size=’medium’ shape=’shield’ icon=” iconcolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=’#4fc1e9′ bgovercolor=’#3bafda’ bgtransparency=” textcolor=’#ffffff’ textovercolor=’#ffffff’ textshadow=” border=” bordercolor=” borderovercolor=” tdbordercolor=’#3bafda’ tdborderovercolor=’#2d85a5′ hovereffect=”]3D Shield Button[/button][button link=’#’ size=’medium’ shape=’skew’ icon=” iconcolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=’#ac92ec’ bgovercolor=’#967adc’ bgtransparency=” textcolor=’#ffffff’ textovercolor=’#ffffff’ textshadow=” border=” bordercolor=” borderovercolor=” tdbordercolor=’#967adc’ tdborderovercolor=’#6f58a8′ hovereffect=”]3D Skew Button[/button][/column][column type=’3′ last=’1′][title]Gradient 3D Buttons[/title][separator marginTop=’20’][/separator][text animation=’default’]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/text][separator margintop=’30’ align=’left’ animation=’default’][/separator][button link=’#’ size=’medium’ shape=’round’ icon=” iconcolor=” iconposition=” bggradstart=’#2ca1cb’ bggradend=’#48c7f6′ gradtype=” bgcolor=” bgovercolor=” bgtransparency=” textcolor=’#ffffff’ textovercolor=’#ffffff’ textshadow=” border=” bordercolor=” borderovercolor=” tdbordercolor=’#2482a5′ tdborderovercolor=’#156785′ hovereffect=”]Gradient 1[/button][button link=’#’ size=’medium’ shape=’round’ icon=” iconcolor=” iconposition=” bggradstart=’#fc6e51′ bggradend=’#d34f39′ gradtype=’left’ bgcolor=” bgovercolor=” bgtransparency=” textcolor=’#ffffff’ textovercolor=’#ffffff’ textshadow=” border=” bordercolor=” borderovercolor=” tdbordercolor=’#e9573f’ tdborderovercolor=’#a13c2b’ hovereffect=”]Gradient 2[/button][/column][column type=’12’ last=’1′][separator margintop=’70’ marginbottom=’60’ style=’2′ align=’center’ width=’220′][/separator][/column][column type=’6′][title]3D Buttons – Border Enabled[/title][separator marginTop=’20’][/separator][text]By enabling border on any type of buttons the inset (the top white semi transparent border) is automatically enabled, however if you wish you can forcefully set it by by setting inset=’0′, below are a few examples. Text shadow is also enabled in following examples.[/text][separator marginTop=’30’][/separator][button link=’#’ size=’medium’ shape=’flat’ icon=” iconcolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=’#ed5565′ bgovercolor=’#da4453′ bgtransparency=” textcolor=’#ffffff’ textovercolor=’#ffffff’ textshadow=’1′ border=’1′ bordercolor=’#da4453′ borderovercolor=’#da4453′ tdbordercolor=’#da4453′ tdborderovercolor=’#912f39′ hovereffect=” marginright=’3′]3D Flat Button[/button][button link=’#’ size=’medium’ shape=’round’ icon=” iconcolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=’#fc6e51′ bgovercolor=’#e9573f’ bgtransparency=” textcolor=’#ffffff’ textovercolor=’#ffffff’ textshadow=’1′ border=’1′ bordercolor=’#e9573f’ borderovercolor=’#e9573f’ tdbordercolor=’#e9573f’ tdborderovercolor=’#a13c2b’ hovereffect=” marginright=’3′]3D Round[/button][button link=’#’ size=’medium’ shape=’pill’ icon=” iconcolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=’#a0d468′ bgovercolor=’#8cc152′ bgtransparency=” textcolor=’#ffffff’ textovercolor=’#ffffff’ textshadow=’1′ border=’1′ bordercolor=’#8cc152′ borderovercolor=’#8cc152′ tdbordercolor=’#8cc152′ tdborderovercolor=’#658c3b’ marginright=’3’hovereffect=”]3D Pill Button[/button][button link=’#’ size=’medium’ shape=’shield’ icon=” iconcolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=’#4fc1e9′ bgovercolor=’#3bafda’ bgtransparency=” textcolor=’#ffffff’ textovercolor=’#ffffff’ textshadow=’1′ border=’1′ bordercolor=’#3bafda’ borderovercolor=’#3bafda’ tdbordercolor=’#3bafda’ tdborderovercolor=’#2d85a5′ hovereffect=” marginright=’0′]3D Shield Button[/button][/column][column type=’6′ last=’1′][title]3D Buttons – Mouse Roll Over Effect[/title][separator marginTop=’20’][/separator][text]This cool effect can be enabled by NOT setting one of the 3D bottom border state colors (tdbordercolor, tdborderovercolor), just set it to tdborderovercolor=” or tdbordercolor=”. Try using gradient width 3D buttons to achieve amazing button effects.[/text][separator marginTop=’30’][/separator][button link=’#’ size=’medium’ shape=’skew’ icon=” iconcolor=” iconposition=” bggradstart=’#ac92ec’ bggradend=’967adc’ gradtype=” bgcolor=” bgovercolor=” bgtransparency=” textcolor=’#ffffff’ textovercolor=’#ffffff’ textshadow=’1′ border=’1′ bordercolor=’#967adc’ borderovercolor=’#967adc’ tdbordercolor=’#6f58a8′ tdborderovercolor=” hovereffect=”]3D Skew Button[/button][button link=’#’ size=’medium’ shape=’round’ icon=” iconcolor=” iconposition=” bggradstart=’#2ca1cb’ bggradend=’#48c7f6′ gradtype=” bgcolor=” bgovercolor=” bgtransparency=” textcolor=’#ffffff’ textovercolor=’#ffffff’ textshadow=’1′ border=’1′ bordercolor=’#2a94ba’ borderovercolor=’#2a94ba’ tdbordercolor=’#2482a5′ tdborderovercolor=” hovereffect=”]Gradient 1[/button][button link=’#’ size=’medium’ shape=’round’ icon=” iconcolor=” iconposition=” bggradstart=’#fc6e51′ bggradend=’#d34f39′ gradtype=’left’ bgcolor=” bgovercolor=” bgtransparency=” textcolor=’#ffffff’ textovercolor=’#ffffff’ textshadow=’1′ border=’1′ bordercolor=’#d34f39′ borderovercolor=’#d34f39′ tdbordercolor=” tdborderovercolor=’#e9573f’ hovereffect=”]Gradient 2[/button][button link=’#’ size=’medium’ shape=’pill’ icon=’fa-desktop’ iconcolor=” iconposition=’after’ bggradstart=’#fc6e51′ bggradend=’#d34f39′ gradtype=’left’ bgcolor=” bgovercolor=” bgtransparency=” textcolor=’#ffffff’ textovercolor=’#ffffff’ textshadow=’1′ border=’1′ bordercolor=’#d34f39′ borderovercolor=’#d34f39′ tdbordercolor=” tdborderovercolor=’#a13c2b’ hovereffect=”]Buy Bravio[/button][/column][/container][container collapse=’true’ fullwidth=’no’][column type=’12’ last=’1′][separator margintop=’70’ marginbottom=’60’ style=’2′ align=’center’ width=’220′][/separator][/column][/container][container section_title=’Borders’ fullwidth=’yes’ scrolltype=’fixed’ bgtransparency=’0′ bottom=’50’ innerbottomshadowsize=’0′ bordertop=’0′ borderbottom=’0′ topseparator=’disable’ topseparatorshape=’diagonal’ bottomseparator=’disable’ bottomseparatorshape=’diagonal’ collapse=’true’][column type=’3′][content_box style=’5′ size=’small’ iconcolor=’#c7d2d5′ rollovericoncolor=’primary’ button=” button_link=’#’ animation=’fadeInUp’ animation_duration=’.4s’ title=’Border Colors’ icon=’fa-arrows-alt’][separator marginTop=’20’][/separator]You can set border active and over state colors. We have added some examples.[separator marginTop=’30’][/separator][button link=’#’ size=’medium’ shape=’flat’ icon=” iconcolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=’#ffffff’ bgovercolor=’#f9f9f9′ bgtransparency=” textcolor=’accent’ textovercolor=’primary’ fontweight=” border=’1′ bordercolor=’primary’ borderovercolor=’accent’ hovereffect=” lrpadding=’30’]Button[/button][button link=’#’ size=’medium’ shape=’round’ icon=” iconcolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=’#ffffff’ bgovercolor=’#f9f9f9′ bgtransparency=” textcolor=’accent’ textovercolor=’primary’ fontweight=” border=’1′ bordercolor=’accent’ borderovercolor=’primary’ hovereffect=” lrpadding=’30’]Button[/button][/content_box][/column][column type=’6′][content_box style=’5′ size=’small’ iconcolor=’#c7d2d5′ rollovericoncolor=’primary’ button=” button_link=’#’ align=’center’ animation=’fadeInUp’ animation_duration=’.4s’ title=’Border Size’ icon=’fa-arrows-alt’][separator marginTop=’20’][/separator]Border can be set to any type of button. If you set border e.g. border=’1′ the inset (semi transparent top white border) is automatically enabled, turn it off by setting inset=’0′.[separator marginTop=’24’][/separator][button link=’#’ size=’medium’ shape=’round’ icon=” iconcolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=” bgovercolor=’primary’ bgtransparency=” textcolor=’accent’ textovercolor=’#ffffff’ fontweight=” border=” bordercolor=” borderovercolor=” tdbordercolor=” tdborderovercolor=” hovereffect=” marginright=” lrpadding=’25’ inset=’0′]NO Border[/button][button link=’#’ size=’medium’ shape=’round’ icon=” iconcolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=” bgovercolor=’primary’ bgtransparency=” textcolor=’accent’ textovercolor=’#ffffff’ fontweight=” border=’1′ bordercolor=’accent’ borderovercolor=’primary’ tdbordercolor=” tdborderovercolor=” hovereffect=” marginright=” lrpadding=’25’ inset=’0′]1px Border[/button][button link=’#’ size=’medium’ shape=’round’ icon=” iconcolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=” bgovercolor=’primary’ bgtransparency=” textcolor=’accent’ textovercolor=’#ffffff’ fontweight=” border=’2′ bordercolor=’accent’ borderovercolor=’primary’ tdbordercolor=” tdborderovercolor=” hovereffect=” marginright=” lrpadding=’25’ inset=’0′]2px Border[/button][button link=’#’ size=’medium’ shape=’round’ icon=” iconcolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=” bgovercolor=’primary’ bgtransparency=” textcolor=’accent’ textovercolor=’#ffffff’ fontweight=” border=’3′ bordercolor=’accent’ borderovercolor=’primary’ tdbordercolor=” tdborderovercolor=” hovereffect=” marginright=’0′ lrpadding=’25’ inset=’0′]3px Border[/button][/content_box][/column][column type=’3′ last=’1′][content_box style=’5′ size=’small’ iconcolor=’#c7d2d5′ rollovericoncolor=’primary’ button=” button_link=’#’ animation=’fadeInUp’ animation_duration=’.4s’ title=’Any Shape / Size’ icon=’fa-arrows-alt’][separator marginTop=’20’][/separator]Border can be applied to all available sizes and shapes without any limit.[separator marginTop=’30’][/separator][button link=’#’ size=’medium’ shape=’flat’ icon=” iconcolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=” bgovercolor=’primary’ bgtransparency=” textcolor=’accent’ textovercolor=’#ffffff’ fontweight=” border=’1′ bordercolor=’accent’ borderovercolor=’primary’ tdbordercolor=” tdborderovercolor=” hovereffect=” lrpadding=” marginright=’4′]1px Border[/button][button link=’#’ size=’medium’ shape=’skew’ icon=” iconcolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=” bgovercolor=’primary’ bgtransparency=” textcolor=’accent’ textovercolor=’#ffffff’ fontweight=” border=’1′ bordercolor=’accent’ borderovercolor=’primary’ tdbordercolor=” tdborderovercolor=” hovereffect=” marginright=’0′]1px Border[/button][/content_box][/column][/container][container section_title=’Hover Shadow Effect’ fullwidth=’yes’ textalign=’center’ scrolltype=’fixed’ bgcolor=’#f9f9f9′ bgtransparency=’0′ top=’130′ bottom=’110′ innerbottomshadowsize=’0′ bordertop=’0′ borderbottom=’0′ topseparator=’enable’ topseparatorshape=’circle’ topseparatorcolor=’#ffffff’ bottomseparator=’enable’ bottomseparatorshape=’circle’ bottomseparatorcolor=’#ffffff’ mobiletop=’60’ mobilebottom=’50’ collapse=’true’][column type=’12’ last=’1′][content_box style=’2′ size=’large’ align=’center’ iconcolor=’#c7d2d5′ rollovericoncolor=’primary’ button=” button_link=’#’ animation=’fadeInUp’ animation_duration=’.4s’ title=’HOVER Shadows Effect’ icon=’fa-arrows-alt’][text]You can apply this effect to any currently available shapes i.e. Flat, Round, Pill, Shield and Skew.[/text][separator marginTop=’15’][/separator][button link=’#’ size=’medium’ shape=’flat’ icon=” iconcolor=” iconovercolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=’accent’ bgovercolor=’accent’ bgtransparency=” textcolor=’#ffffff’ textovercolor=’#FFFFFF’ textshadow=’1′ inset=’0′ border=’2′ bordercolor=’accent’ borderovercolor=’accent’ tdbordercolor=” tdborderovercolor=” lrpadding=” marginright=” hovereffect=’shadow’]Drop Shadow[/button][button link=’#’ size=’medium’ shape=’round’ icon=” iconcolor=” iconovercolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=’accent’ bgovercolor=’accent’ bgtransparency=” textcolor=’#ffffff’ textovercolor=’#FFFFFF’ textshadow=’1′ inset=’0′ border=’2′ bordercolor=’accent’ borderovercolor=’accent’ tdbordercolor=” tdborderovercolor=” lrpadding=” marginright=” hovereffect=’grow-shadow’]Grow Shadow[/button][button link=’#’ size=’medium’ shape=’round’ icon=” iconcolor=” iconovercolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=’accent’ bgovercolor=’accent’ bgtransparency=” textcolor=’#ffffff’ textovercolor=’#FFFFFF’ textshadow=’1′ inset=’0′ border=’2′ bordercolor=’accent’ borderovercolor=’accent’ tdbordercolor=” tdborderovercolor=” lrpadding=” marginright=” hovereffect=’box-shadow-outset’]Outset Shadow[/button][button link=’#’ size=’medium’ shape=’round’ icon=” iconcolor=” iconovercolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=’accent’ bgovercolor=’accent’ bgtransparency=” textcolor=’#ffffff’ textovercolor=’#FFFFFF’ textshadow=’1′ inset=’0′ border=’2′ bordercolor=’accent’ borderovercolor=’accent’ tdbordercolor=” tdborderovercolor=” lrpadding=” marginright=” hovereffect=’box-shadow-inset’]Inset Shadow[/button][/content_box][/column][/container][container section_title=’Inset, Font Awesome etc’ fullwidth=’yes’ scrolltype=’fixed’ bgtransparency=’0′ top=’70’ bottom=’50’ innerbottomshadowsize=’0′ bordertop=’0′ borderbottom=’0′ topseparator=’disable’ topseparatorshape=’diagonal’ bottomseparator=’disable’ bottomseparatorshape=’diagonal’ collapse=’true’][column type=’4′][content_box style=’5′ size=’small’ iconcolor=’#c7d2d5′ rollovericoncolor=’primary’ button=” button_link=’#’ animation=’fadeInUp’ animation_duration=’.4s’ title=’Inset Border & Color’ icon=’fa-arrows-alt’][separator marginTop=’20’][/separator]By default inset border is ON if border is set but can be disabled by setting inset=’0′, you can also modify the color of inset border (top white border) by adding a custom color in hex format e.g. inset=’#990000′.[separator marginTop=’40’][/separator][button link=’#’ size=’medium’ shape=’round’ icon=” iconcolor=” iconposition=” bggradstart=’#d53f41′ bggradend=’#ef4f4f’ gradtype=” bgcolor=” bgovercolor=” bgtransparency=” textcolor=’#FFFFFF’ textovercolor=’#FFFFFF’ textshadow=’1′ fontweight=” border=’1′ bordercolor=’#cd2c3b’ borderovercolor=’#cd2c3b’ hovereffect=”]Inset ON[/button][button link=’#’ size=’medium’ shape=’round’ inset=’0′ icon=” iconcolor=” iconposition=” bggradstart=’#d53f41′ bggradend=’#ef4f4f’ gradtype=” bgcolor=” bgovercolor=” bgtransparency=” textcolor=’#FFFFFF’ textovercolor=’#FFFFFF’ textshadow=’1′ fontweight=” border=’1′ bordercolor=’#cd2c3b’ borderovercolor=’#cd2c3b’ hovereffect=”]Inset OFF[/button][button link=’#’ size=’medium’ shape=’round’ inset=’#ffa200′ icon=” iconcolor=” iconposition=” bggradstart=’#d53f41′ bggradend=’#ef4f4f’ gradtype=” bgcolor=” bgovercolor=” bgtransparency=” textcolor=’#FFFFFF’ textovercolor=’#FFFFFF’ textshadow=’1′ fontweight=” border=’1′ bordercolor=’#cd2c3b’ borderovercolor=’#cd2c3b’ hovereffect=” lrpadding=’14’]Inset COLOR[/button][/content_box][/column][column type=’4′][content_box style=’5′ size=’small’ iconcolor=’#c7d2d5′ rollovericoncolor=’primary’ button=” button_link=’#’ animation=’fadeInUp’ animation_duration=’.4s’ title=’Left / Right Padding & Margins’ icon=’fa-arrows-alt’][separator marginTop=’20’][/separator]You can set custom left / right padding for example if you choose ‘medium’ button but want to have custom width then set e.g. lrpadding=’50’. Margin to right can be set with marginright variable e.g. marginright=’10’.[separator marginTop=’40’][/separator][button link=’#’ size=’medium’ shape=’round’ icon=” iconcolor=” iconposition=” bggradstart=’#d53f41′ bggradend=’#ef4f4f’ gradtype=” bgcolor=” bgovercolor=” bgtransparency=” textcolor=’#FFFFFF’ textovercolor=’#FFFFFF’ textshadow=’1′ fontweight=” border=’1′ bordercolor=’#cd2c3b’ borderovercolor=’#cd2c3b’ hovereffect=”]Default Padding[/button][button link=’#’ size=’medium’ shape=’round’ icon=” iconcolor=” iconposition=” bggradstart=’#d53f41′ bggradend=’#ef4f4f’ gradtype=” bgcolor=” bgovercolor=” bgtransparency=” textcolor=’#FFFFFF’ textovercolor=’#FFFFFF’ textshadow=’1′ fontweight=” border=’1′ bordercolor=’#cd2c3b’ borderovercolor=’#cd2c3b’ hovereffect=” lrpadding=’35’ marginright=’0′]Custom Padding[/button][/content_box][/column][column type=’4′ last=’1′][content_box style=’5′ size=’small’ iconcolor=’#c7d2d5′ rollovericoncolor=’primary’ button=” button_link=’#’ animation=’fadeInUp’ animation_duration=’.4s’ title=’Text Shadows’ icon=’fa-arrows-alt’][separator marginTop=’20’][/separator]Adding a text shadow in buttons makes it more appealing. We have provided an option to turn text shadow ON / OFF. By default text shadow is disabled, however by setting ‘textshdow’ variable to 1 enables text shadow. [separator marginTop=’40’][/separator][button link=’#’ size=’medium’ shape=’round’ icon=” iconcolor=” iconposition=” bggradstart=’#d53f41′ bggradend=’#ef4f4f’ gradtype=” bgcolor=” bgovercolor=” bgtransparency=” textcolor=’#FFFFFF’ textovercolor=’#FFFFFF’ textshadow=” fontweight=” border=’1′ bordercolor=’#cd2c3b’ borderovercolor=’#cd2c3b’ hovereffect=”]Hide Text Shadow[/button][button link=’#’ size=’medium’ shape=’round’ icon=” iconcolor=” iconposition=” bggradstart=’#d53f41′ bggradend=’#ef4f4f’ gradtype=” bgcolor=” bgovercolor=” bgtransparency=” textcolor=’#FFFFFF’ textovercolor=’#FFFFFF’ textshadow=’1′ fontweight=” border=’1′ bordercolor=’#cd2c3b’ borderovercolor=’#cd2c3b’ hovereffect=” lrpadding=”]Show Text Shadow[/button][/content_box][/column][column type=’12’ last=’1′][separator marginTop=’40’][/separator][separator style=’2′ align=’center’ width=’220′][/separator][separator marginTop=’60’][/separator][/column][column type=’3′][content_box style=’5′ size=’small’ iconcolor=’#c7d2d5′ rollovericoncolor=’primary’ button=” button_link=’#’ animation=’fadeInUp’ animation_duration=’.4s’ title=’Font Awesome Icons’ icon=’fa-arrows-alt’][separator marginTop=’20’][/separator]You may select from 470+ Font Awesome Icons to make it look more appealing.[separator marginTop=’30’][/separator][button link=’#’ size=’medium’ shape=’round’ icon=’fa-cogs’ iconcolor=” iconposition=’after’ bggradstart=’#2ca1cb’ bggradend=’#48c7f6′ gradtype=” bgcolor=” bgovercolor=” bgtransparency=” textcolor=’#ffffff’ textovercolor=’#ddf6ff’ textshadow=’1′ border=’1′ bordercolor=’#2a94ba’ borderovercolor=’#2a94ba’ tdbordercolor=’#2482a5′ tdborderovercolor=’#2482a5′ hovereffect=” lrpadding=’16’ marginright=’1′]The Font[/button][button link=’#’ size=’medium’ shape=’round’ icon=’fa-laptop’ iconcolor=” iconposition=’after’ bggradstart=’#2ca1cb’ bggradend=’#48c7f6′ gradtype=” bgcolor=” bgovercolor=” bgtransparency=” textcolor=’#ffffff’ textovercolor=’#ddf6ff’ textshadow=’1′ border=’1′ bordercolor=’#2a94ba’ borderovercolor=’#2a94ba’ tdbordercolor=’#2482a5′ tdborderovercolor=’#2482a5′ hovereffect=” lrpadding=’14’ marginright=’0′]Awesome[/button][/content_box][/column][column type=’6′][content_box style=’5′ size=’small’ iconcolor=’#c7d2d5′ rollovericoncolor=’primary’ button=” button_link=’#’ align=’center’ animation=’fadeInUp’ animation_duration=’.4s’ title=’Icon Active and Over Colors’ icon=’fa-arrows-alt’][separator marginTop=’20’][/separator]If you dont set any icon color, it will use the textcolor value, however setting ‘iconcolor’ and ‘iconovercolor’ will change the icon color.[separator marginTop=’30’][/separator][button link=’#’ size=’medium’ shape=’round’ icon=’fa-flask’ iconcolor=’#227c9d’ iconovercolor=” iconposition=’after’ bggradstart=’#2ca1cb’ bggradend=’#48c7f6′ gradtype=’left’ bgcolor=” bgovercolor=” bgtransparency=” textcolor=’#ffffff’ textovercolor=’#ddf6ff’ textshadow=’1′ border=’1′ bordercolor=’#2a94ba’ borderovercolor=’#2a94ba’ tdbordercolor=’#2482a5′ tdborderovercolor=’#2482a5′ hovereffect=” lrpadding=” marginright=”]Icon Active Color[/button][button link=’#’ size=’medium’ shape=’round’ icon=’fa-laptop’ iconcolor=” iconovercolor=’#227c9d’ iconposition=’after’ bggradstart=’#2ca1cb’ bggradend=’#48c7f6′ gradtype=’left’ bgcolor=” bgovercolor=” bgtransparency=” textcolor=’#ffffff’ textovercolor=’#ddf6ff’ textshadow=’1′ border=’1′ bordercolor=’#2a94ba’ borderovercolor=’#2a94ba’ tdbordercolor=’#2482a5′ tdborderovercolor=’#2482a5′ hovereffect=” lrpadding=” marginright=”]Icon Mouseover Color[/button][button link=’#’ size=’medium’ shape=’round’ icon=’fa-laptop’ iconcolor=’#c7ec58′ iconovercolor=’#faaf95′ iconposition=’after’ bggradstart=’#2ca1cb’ bggradend=’#48c7f6′ gradtype=’left’ bgcolor=” bgovercolor=” bgtransparency=” textcolor=’#ffffff’ textovercolor=’#ddf6ff’ textshadow=’1′ border=’1′ bordercolor=’#2a94ba’ borderovercolor=’#2a94ba’ tdbordercolor=’#2482a5′ tdborderovercolor=’#2482a5′ hovereffect=” lrpadding=” marginright=’0′]Both Colors[/button][/content_box][/column][column type=’3′ last=’1′][content_box style=’5′ size=’small’ iconcolor=’#c7d2d5′ rollovericoncolor=’primary’ button=” button_link=’#’ animation=’fadeInUp’ animation_duration=’.4s’ title=’Icon Position’ icon=’fa-arrows-alt’][separator marginTop=’20’][/separator]Bravio also allows you to set icon position before / after text.[separator marginTop=’30’][/separator][button link=’#’ size=’medium’ shape=’round’ icon=’fa-cogs’ iconcolor=” iconposition=’before’ bggradstart=’#2ca1cb’ bggradend=’#48c7f6′ gradtype=” bgcolor=” bgovercolor=” bgtransparency=” textcolor=’#ffffff’ textovercolor=’#ddf6ff’ textshadow=’1′ border=’1′ bordercolor=’#2a94ba’ borderovercolor=’#2a94ba’ tdbordercolor=’#2482a5′ tdborderovercolor=’#2482a5′ hovereffect=” lrpadding=’16’ marginright=’1′]The Font[/button][button link=’#’ size=’medium’ shape=’round’ icon=’fa-laptop’ iconcolor=” iconposition=’after’ bggradstart=’#2ca1cb’ bggradend=’#48c7f6′ gradtype=” bgcolor=” bgovercolor=” bgtransparency=” textcolor=’#ffffff’ textovercolor=’#ddf6ff’ textshadow=’1′ border=’1′ bordercolor=’#2a94ba’ borderovercolor=’#2a94ba’ tdbordercolor=’#2482a5′ tdborderovercolor=’#2482a5′ hovereffect=” lrpadding=’14’ marginright=’0′]Awesome[/button][/content_box][/column][/container][container section_title=’Background Transparency’ fullwidth=’yes’ bgimage=’http://bravio.co/demos/default/wp-content/uploads/2016/02/bg_polygon_black.jpg’ scrolltype=’move’ bgpattern=’7′ bgtransparency=’0′ top=’130′ bottom=’120′ innerbottomshadowsize=’0′ bordertop=’0′ borderbottom=’0′ topseparator=’enable’ topseparatorshape=’triangle’ topseparatorcolor=’#ffffff’ bottomseparator=’enable’ bottomseparatorshape=’clouds’ bottomseparatorcolor=’#ffffff’ mobiletop=’70’ mobilebottom=’60’ collapse=’true’][column type=’12’ textalign=’center’ shadowdrop=’no’ bgtransparency=’0′ border=’0′ last=’1′][text color=’#ffffff’ fontsize=’30’ fontweight=’400′ fontfamily=’Raleway’ lineheight=’40’ animation=’default’]Background Transparency[/text][separator marginTop=’10’][/separator][text color=’#fff’ fontsize=’18’ fontweight=’300′]You can set background transparency with combination of any styles.[/text][separator marginTop=’30’][/separator][button link=’#’ size=’large’ shape=’round’ inset=’0′ bgcolor=’#FFFFFF’ bgovercolor=’#000000′ extraspace=” textcolor=’#FFFFFF’ textovercolor=’#FFFFFF’ border=’1′ bordercolor=’#ffffff’ borderovercolor=’#ffffff’ bggradstart=” bggradend=” bgtransparency=’20’ hovereffect=’bob’]Get in Touch[/button][button link=’#’ size=’large’ shape=’round’ inset=’0′ bgcolor=’accent’ bgovercolor=’primary’ extraspace=” textcolor=’#FFFFFF’ textovercolor=’#FFFFFF’ border=’1px’ bordercolor=’accent’ borderovercolor=’#ffffff’ bggradstart=” bggradend=” bgtransparency=’40’ hovereffect=’buzz-out’]Get a Free Quote[/button][button link=’#’ size=’large’ shape=’round’ inset=’0′ bgcolor=’#8fca40′ bgovercolor=’primary’ extraspace=” textcolor=’#FFFFFF’ textovercolor=’#FFFFFF’ border=’1px’ bordercolor=’#8fca40′ borderovercolor=’#ffffff’ bggradstart=” bggradend=” bgtransparency=’40’ hovereffect=’bounce-to-bottom’]Call Back Request[/button][button link=’#’ size=’large’ shape=’round’ inset=’0′ bgcolor=’#000000′ bgovercolor=’#10beff’ extraspace=” textcolor=’#FFFFFF’ textovercolor=’#FFFFFF’ border=’1px’ bordercolor=’#444444′ borderovercolor=’#ffffff’ bggradstart=” bggradend=” bgtransparency=’40’ hovereffect=’wobble-horizontal’]Buy Bravio[/button][/column][/container][container collapse=’true’ fullwidth=’yes’ top=’80’ bottom=’30’][column type=’6′][content_box style=’5′ size=’small’ iconcolor=’#c7d2d5′ rollovericoncolor=’primary’ button=” button_link=’#’ align=’center’ animation=’fadeInUp’ animation_duration=’.4s’ title=’HOVER 2D Transition Effects’ icon=’fa-arrows-alt’][separator marginTop=’20’][/separator]Bravio buttons tons of has built in hover effects to choose from, below are examples of 2D transition hover effects. Set hover=’effectname’ and you are all set.[separator marginTop=’35’][/separator][button link=’#’ size=’medium’ shape=’round’ icon=” iconcolor=” iconovercolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=” bgovercolor=’accent’ bgtransparency=” textcolor=’accent’ textovercolor=’#fff’ textshadow=” border=’1′ bordercolor=’accent’ borderovercolor=’accent’ tdbordercolor=” fontfamily=’Open Sans’ fontweight=” tdborderovercolor=” lrpadding=” marginright=” hovereffect=’grow’]Grow[/button][button link=’#’ size=’medium’ shape=’round’ icon=” iconcolor=” iconovercolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=” bgovercolor=’accent’ bgtransparency=” textcolor=’accent’ textovercolor=’#fff’ textshadow=” border=’1′ bordercolor=’accent’ borderovercolor=’accent’ tdbordercolor=” fontfamily=’Open Sans’ fontweight=” tdborderovercolor=” lrpadding=” marginright=” hovereffect=’shrink’]Shrink[/button][button link=’#’ size=’medium’ shape=’round’ icon=” iconcolor=” iconovercolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=” bgovercolor=’accent’ bgtransparency=” textcolor=’accent’ textovercolor=’#fff’ textshadow=” border=’1′ bordercolor=’accent’ borderovercolor=’accent’ tdbordercolor=” fontfamily=’Open Sans’ fontweight=” tdborderovercolor=” lrpadding=” marginright=” hovereffect=’pulse’]Pulse[/button][button link=’#’ size=’medium’ shape=’round’ icon=” iconcolor=” iconovercolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=” bgovercolor=’accent’ bgtransparency=” textcolor=’accent’ textovercolor=’#fff’ textshadow=” border=’1′ bordercolor=’accent’ borderovercolor=’accent’ tdbordercolor=” fontfamily=’Open Sans’ fontweight=” tdborderovercolor=” lrpadding=” marginright=” hovereffect=’pulse-grow’]Pulse & Grow[/button][separator marginTop=’8′][/separator][button link=’#’ size=’medium’ shape=’round’ icon=” iconcolor=” iconovercolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=” bgovercolor=’accent’ bgtransparency=” textcolor=’accent’ textovercolor=’#fff’ textshadow=” border=’1′ bordercolor=’accent’ borderovercolor=’accent’ tdbordercolor=” fontfamily=’Open Sans’ fontweight=” tdborderovercolor=” lrpadding=” marginright=” hovereffect=’pulse-shrink’]Pulse & Shrink[/button][button link=’#’ size=’medium’ shape=’round’ icon=” iconcolor=” iconovercolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=” bgovercolor=’accent’ bgtransparency=” textcolor=’accent’ textovercolor=’#fff’ textshadow=” border=’1′ bordercolor=’accent’ borderovercolor=’accent’ tdbordercolor=” fontfamily=’Open Sans’ fontweight=” tdborderovercolor=” lrpadding=” marginright=” hovereffect=’push’]Push[/button][button link=’#’ size=’medium’ shape=’round’ icon=” iconcolor=” iconovercolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=” bgovercolor=’accent’ bgtransparency=” textcolor=’accent’ textovercolor=’#fff’ textshadow=” border=’1′ bordercolor=’accent’ borderovercolor=’accent’ tdbordercolor=” fontfamily=’Open Sans’ fontweight=” tdborderovercolor=” lrpadding=” marginright=” hovereffect=’pop’]Pop[/button][button link=’#’ size=’medium’ shape=’round’ icon=” iconcolor=” iconovercolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=” bgovercolor=’accent’ bgtransparency=” textcolor=’accent’ textovercolor=’#fff’ textshadow=” border=’1′ bordercolor=’accent’ borderovercolor=’accent’ tdbordercolor=” fontfamily=’Open Sans’ fontweight=” tdborderovercolor=” lrpadding=” marginright=” hovereffect=’rotate’]Rotate[/button][separator marginTop=’8′][/separator][button link=’#’ size=’medium’ shape=’round’ icon=” iconcolor=” iconovercolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=” bgovercolor=’accent’ bgtransparency=” textcolor=’accent’ textovercolor=’#fff’ textshadow=” border=’1′ bordercolor=’accent’ borderovercolor=’accent’ tdbordercolor=” fontfamily=’Open Sans’ fontweight=” tdborderovercolor=” lrpadding=” marginright=” hovereffect=’grow-rotate’]Rotate & Grow[/button][button link=’#’ size=’medium’ shape=’round’ icon=” iconcolor=” iconovercolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=” bgovercolor=’accent’ bgtransparency=” textcolor=’accent’ textovercolor=’#fff’ textshadow=” border=’1′ bordercolor=’accent’ borderovercolor=’accent’ tdbordercolor=” fontfamily=’Open Sans’ fontweight=” tdborderovercolor=” lrpadding=” marginright=” hovereffect=’float’]Float[/button][button link=’#’ size=’medium’ shape=’round’ icon=” iconcolor=” iconovercolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=” bgovercolor=’accent’ bgtransparency=” textcolor=’accent’ textovercolor=’#fff’ textshadow=” border=’1′ bordercolor=’accent’ borderovercolor=’accent’ tdbordercolor=” fontfamily=’Open Sans’ fontweight=” tdborderovercolor=” lrpadding=” marginright=” hovereffect=’sink’]Sink[/button][button link=’#’ size=’medium’ shape=’round’ icon=” iconcolor=” iconovercolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=” bgovercolor=’accent’ bgtransparency=” textcolor=’accent’ textovercolor=’#fff’ textshadow=” border=’1′ bordercolor=’accent’ borderovercolor=’accent’ tdbordercolor=” fontfamily=’Open Sans’ fontweight=” tdborderovercolor=” lrpadding=” marginright=” hovereffect=’bob’]Bob[/button][button link=’#’ size=’medium’ shape=’round’ icon=” iconcolor=” iconovercolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=” bgovercolor=’accent’ bgtransparency=” textcolor=’accent’ textovercolor=’#fff’ textshadow=” border=’1′ bordercolor=’accent’ borderovercolor=’accent’ tdbordercolor=” fontfamily=’Open Sans’ fontweight=” tdborderovercolor=” lrpadding=” marginright=” hovereffect=’hang’]Hang[/button][separator marginTop=’8′][/separator][button link=’#’ size=’medium’ shape=’round’ icon=” iconcolor=” iconovercolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=” bgovercolor=’accent’ bgtransparency=” textcolor=’accent’ textovercolor=’#fff’ textshadow=” border=’1′ bordercolor=’accent’ borderovercolor=’accent’ tdbordercolor=” fontfamily=’Open Sans’ fontweight=” tdborderovercolor=” lrpadding=” marginright=” hovereffect=’skew’]Skew[/button][button link=’#’ size=’medium’ shape=’round’ icon=” iconcolor=” iconovercolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=” bgovercolor=’accent’ bgtransparency=” textcolor=’accent’ textovercolor=’#fff’ textshadow=” border=’1′ bordercolor=’accent’ borderovercolor=’accent’ tdbordercolor=” fontfamily=’Open Sans’ fontweight=” tdborderovercolor=” lrpadding=” marginright=” hovereffect=’skew-forward’]Skew Forward[/button][button link=’#’ size=’medium’ shape=’round’ icon=” iconcolor=” iconovercolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=” bgovercolor=’accent’ bgtransparency=” textcolor=’accent’ textovercolor=’#fff’ textshadow=” border=’1′ bordercolor=’accent’ borderovercolor=’accent’ tdbordercolor=” fontfamily=’Open Sans’ fontweight=” tdborderovercolor=” lrpadding=” marginright=” hovereffect=’skew-backward’]Skew Backward[/button][separator marginTop=’8′][/separator][button link=’#’ size=’medium’ shape=’round’ icon=” iconcolor=” iconovercolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=” bgovercolor=’accent’ bgtransparency=” textcolor=’accent’ textovercolor=’#fff’ textshadow=” border=’1′ bordercolor=’accent’ borderovercolor=’accent’ tdbordercolor=” fontfamily=’Open Sans’ fontweight=” tdborderovercolor=” lrpadding=” marginright=” hovereffect=’wobble-horizontal’]Wobble Horizontal[/button][button link=’#’ size=’medium’ shape=’round’ icon=” iconcolor=” iconovercolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=” bgovercolor=’accent’ bgtransparency=” textcolor=’accent’ textovercolor=’#fff’ textshadow=” border=’1′ bordercolor=’accent’ borderovercolor=’accent’ tdbordercolor=” fontfamily=’Open Sans’ fontweight=” tdborderovercolor=” lrpadding=” marginright=” hovereffect=’wobble-vertical’]Wobble Vertical[/button][button link=’#’ size=’medium’ shape=’round’ icon=” iconcolor=” iconovercolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=” bgovercolor=’accent’ bgtransparency=” textcolor=’accent’ textovercolor=’#fff’ textshadow=” border=’1′ bordercolor=’accent’ borderovercolor=’accent’ tdbordercolor=” fontfamily=’Open Sans’ fontweight=” tdborderovercolor=” lrpadding=” marginright=” hovereffect=’wobble-to-bottom-right’]Wobble to Bottom Right[/button][separator marginTop=’8′][/separator][button link=’#’ size=’medium’ shape=’round’ icon=” iconcolor=” iconovercolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=” bgovercolor=’accent’ bgtransparency=” textcolor=’accent’ textovercolor=’#fff’ textshadow=” border=’1′ bordercolor=’accent’ borderovercolor=’accent’ tdbordercolor=” fontfamily=’Open Sans’ fontweight=” tdborderovercolor=” lrpadding=” marginright=” hovereffect=’wobble-to-top-right’]Wobble to Top Right[/button][button link=’#’ size=’medium’ shape=’round’ icon=” iconcolor=” iconovercolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=” bgovercolor=’accent’ bgtransparency=” textcolor=’accent’ textovercolor=’#fff’ textshadow=” border=’1′ bordercolor=’accent’ borderovercolor=’accent’ tdbordercolor=” fontfamily=’Open Sans’ fontweight=” tdborderovercolor=” lrpadding=” marginright=” hovereffect=’wobble-top’]Wobble Top[/button][button link=’#’ size=’medium’ shape=’round’ icon=” iconcolor=” iconovercolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=” bgovercolor=’accent’ bgtransparency=” textcolor=’accent’ textovercolor=’#fff’ textshadow=” border=’1′ bordercolor=’accent’ borderovercolor=’accent’ tdbordercolor=” fontfamily=’Open Sans’ fontweight=” tdborderovercolor=” lrpadding=” marginright=” hovereffect=’wobble-bottom’]Wobble Bottom[/button][separator marginTop=’8′][/separator][button link=’#’ size=’medium’ shape=’round’ icon=” iconcolor=” iconovercolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=” bgovercolor=’accent’ bgtransparency=” textcolor=’accent’ textovercolor=’#fff’ textshadow=” border=’1′ bordercolor=’accent’ borderovercolor=’accent’ tdbordercolor=” fontfamily=’Open Sans’ fontweight=” tdborderovercolor=” lrpadding=” marginright=” hovereffect=’wobble-skew’]Wobble Skew[/button][button link=’#’ size=’medium’ shape=’round’ icon=” iconcolor=” iconovercolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=” bgovercolor=’accent’ bgtransparency=” textcolor=’accent’ textovercolor=’#fff’ textshadow=” border=’1′ bordercolor=’accent’ borderovercolor=’accent’ tdbordercolor=” fontfamily=’Open Sans’ fontweight=” tdborderovercolor=” lrpadding=” marginright=” hovereffect=’buzz’]Buzz[/button][button link=’#’ size=’medium’ shape=’round’ icon=” iconcolor=” iconovercolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=” bgovercolor=’accent’ bgtransparency=” textcolor=’accent’ textovercolor=’#fff’ textshadow=” border=’1′ bordercolor=’accent’ borderovercolor=’accent’ tdbordercolor=” fontfamily=’Open Sans’ fontweight=” tdborderovercolor=” lrpadding=” marginright=” hovereffect=’buzz-out’]Buzz Out[/button][/content_box][/column][column type=’6′ last=’1′][content_box style=’5′ size=’small’ iconcolor=’#c7d2d5′ rollovericoncolor=’primary’ button=” button_link=’#’ align=’center’ animation=’fadeInUp’ animation_duration=’.4s’ title=’HOVER Background Transition Effects’ icon=’fa-arrows-alt’][separator marginTop=’20’][/separator]Bravio buttons tons of has built in hover effects to choose from, below are examples of background transition hover effects. Set hover=’effectname’ and you are all set.[separator marginTop=’35’][/separator][button link=’#’ size=’medium’ shape=’round’ icon=” iconcolor=” iconovercolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=” bgovercolor=’#555′ bgtransparency=” textcolor=’#555′ textovercolor=’#fff’ textshadow=” border=’1′ bordercolor=’#555′ borderovercolor=’#555′ tdbordercolor=” fontfamily=’Open Sans’ fontweight=” tdborderovercolor=” lrpadding=” marginright=” hovereffect=’sweep-to-right’]Sweep Right[/button][button link=’#’ size=’medium’ shape=’round’ icon=” iconcolor=” iconovercolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=” bgovercolor=’#555′ bgtransparency=” textcolor=’#555′ textovercolor=’#fff’ textshadow=” border=’1′ bordercolor=’#555′ borderovercolor=’#555′ tdbordercolor=” fontfamily=’Open Sans’ fontweight=” tdborderovercolor=” lrpadding=” marginright=” hovereffect=’sweep-to-left’]Sweep Left[/button][button link=’#’ size=’medium’ shape=’round’ icon=” iconcolor=” iconovercolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=” bgovercolor=’#555′ bgtransparency=” textcolor=’#555′ textovercolor=’#fff’ textshadow=” border=’1′ bordercolor=’#555′ borderovercolor=’#555′ tdbordercolor=” fontfamily=’Open Sans’ fontweight=” tdborderovercolor=” lrpadding=” marginright=” hovereffect=’sweep-to-bottom’]Sweep Bottom[/button][button link=’#’ size=’medium’ shape=’round’ icon=” iconcolor=” iconovercolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=” bgovercolor=’#555′ bgtransparency=” textcolor=’#555′ textovercolor=’#fff’ textshadow=” border=’1′ bordercolor=’#555′ borderovercolor=’#555′ tdbordercolor=” fontfamily=’Open Sans’ fontweight=” tdborderovercolor=” lrpadding=” marginright=” hovereffect=’sweep-to-top’]Sweep Top[/button][separator marginTop=’8′][/separator][button link=’#’ size=’medium’ shape=’round’ icon=” iconcolor=” iconovercolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=” bgovercolor=’#555′ bgtransparency=” textcolor=’#555′ textovercolor=’#fff’ textshadow=” border=’1′ bordercolor=’#555′ borderovercolor=’#555′ tdbordercolor=” fontfamily=’Open Sans’ fontweight=” tdborderovercolor=” lrpadding=” marginright=” hovereffect=’bounce-to-right’]Bounce Right[/button][button link=’#’ size=’medium’ shape=’round’ icon=” iconcolor=” iconovercolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=” bgovercolor=’#555′ bgtransparency=” textcolor=’#555′ textovercolor=’#fff’ textshadow=” border=’1′ bordercolor=’#555′ borderovercolor=’#555′ tdbordercolor=” fontfamily=’Open Sans’ fontweight=” tdborderovercolor=” lrpadding=” marginright=”’ hovereffect=’bounce-to-left’]Bounce Left[/button][button link=’#’ size=’medium’ shape=’round’ icon=” iconcolor=” iconovercolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=” bgovercolor=’#555′ bgtransparency=” textcolor=’#555′ textovercolor=’#fff’ textshadow=” border=’1′ bordercolor=’#555′ borderovercolor=’#555′ tdbordercolor=” fontfamily=’Open Sans’ fontweight=” tdborderovercolor=” lrpadding=” marginright=” hovereffect=’bounce-to-bottom’]Bou. Bottom[/button][button link=’#’ size=’medium’ shape=’round’ icon=” iconcolor=” iconovercolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=” bgovercolor=’#555′ bgtransparency=” textcolor=’#555′ textovercolor=’#fff’ textshadow=” border=’1′ bordercolor=’#555′ borderovercolor=’#555′ tdbordercolor=” fontfamily=’Open Sans’ fontweight=” tdborderovercolor=” lrpadding=” marginright=” hovereffect=’bounce-to-top’]Bounce Top[/button][separator marginTop=’8′][/separator][button link=’#’ size=’medium’ shape=’round’ icon=” iconcolor=” iconovercolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=” bgovercolor=’#555′ bgtransparency=” textcolor=’#555′ textovercolor=’#fff’ textshadow=” border=’1′ bordercolor=’#555′ borderovercolor=’#555′ tdbordercolor=” fontfamily=’Open Sans’ fontweight=” tdborderovercolor=” lrpadding=” marginright=” hovereffect=’radial-out’]Radial[/button][button link=’#’ size=’medium’ shape=’round’ icon=” iconcolor=” iconovercolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=” bgovercolor=’#555′ bgtransparency=” textcolor=’#555′ textovercolor=’#fff’ textshadow=” border=’1′ bordercolor=’#555′ borderovercolor=’#555′ tdbordercolor=” fontfamily=’Open Sans’ fontweight=” tdborderovercolor=” lrpadding=” marginright=” hovereffect=’rectangle-out’]Rectangle[/button][button link=’#’ size=’medium’ shape=’round’ icon=” iconcolor=” iconovercolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=” bgovercolor=’#555′ bgtransparency=” textcolor=’#555′ textovercolor=’#fff’ textshadow=” border=’1′ bordercolor=’#555′ borderovercolor=’#555′ tdbordercolor=” fontfamily=’Open Sans’ fontweight=” tdborderovercolor=” lrpadding=” marginright=” hovereffect=’shutter-out-horizontal’]Shutter Horizontal[/button][button link=’#’ size=’medium’ shape=’round’ icon=” iconcolor=” iconovercolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=” bgovercolor=’#555′ bgtransparency=” textcolor=’#555′ textovercolor=’#fff’ textshadow=” border=’1′ bordercolor=’#555′ borderovercolor=’#555′ tdbordercolor=” fontfamily=’Open Sans’ fontweight=” tdborderovercolor=” lrpadding=” marginright=” hovereffect=’shutter-out-vertical’]Shutter Vertical[/button][/content_box][content_box style=’5′ size=’small’ iconcolor=’#c7d2d5′ rollovericoncolor=’primary’ button=” button_link=’#’ align=’center’ animation=’fadeInUp’ animation_duration=’.4s’ title=’HOVER Round Shape Effect’ icon=’fa-arrows-alt’][separator marginTop=’20’][/separator]You can apply this effect to any currently available shapes i.e. Flat, Round, Pill, Shield and Skew.[separator marginTop=’35’][/separator][button link=’#’ size=’medium’ shape=’flat’ icon=” iconcolor=” iconovercolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=” bgovercolor=’#555′ bgtransparency=” textcolor=’#555′ textovercolor=’#fff’ textshadow=” border=’1′ bordercolor=’#555′ borderovercolor=’#555′ tdbordercolor=” fontfamily=’Open Sans’ fontweight=” tdborderovercolor=” lrpadding=” marginright=” hovereffect=’round-corners’]Flat[/button][button link=’#’ size=’medium’ shape=’round’ icon=” iconcolor=” iconovercolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=” bgovercolor=’#555′ bgtransparency=” textcolor=’#555′ textovercolor=’#fff’ textshadow=” border=’1′ bordercolor=’#555′ borderovercolor=’#555′ tdbordercolor=” fontfamily=’Open Sans’ fontweight=” tdborderovercolor=” lrpadding=” marginright=” hovereffect=’round-corners’]Round[/button][button link=’#’ size=’medium’ shape=’pill’ icon=” iconcolor=” iconovercolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=” bgovercolor=’#555′ bgtransparency=” textcolor=’#555′ textovercolor=’#fff’ textshadow=” border=’1′ bordercolor=’#555′ borderovercolor=’#555′ tdbordercolor=” fontfamily=’Open Sans’ fontweight=” tdborderovercolor=” lrpadding=” marginright=” hovereffect=’round-corners’]Pill Button[/button][button link=’#’ size=’medium’ shape=’shield’ icon=” iconcolor=” iconovercolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=” bgovercolor=’#555′ bgtransparency=” textcolor=’#555′ textovercolor=’#fff’ textshadow=” border=’1′ bordercolor=’#555′ borderovercolor=’#555′ tdbordercolor=” fontfamily=’Open Sans’ fontweight=” tdborderovercolor=” lrpadding=” marginright=” hovereffect=’round-corners’]Shield[/button][button link=’#’ size=’medium’ shape=’skew’ icon=” iconcolor=” iconovercolor=” iconposition=” bggradstart=” bggradend=” gradtype=” bgcolor=” bgovercolor=’#555′ bgtransparency=” textcolor=’#555′ textovercolor=’#fff’ textshadow=” border=’1′ bordercolor=’#555′ borderovercolor=’#555′ tdbordercolor=” fontfamily=’Open Sans’ fontweight=” tdborderovercolor=” lrpadding=” marginright=” hovereffect=’round-corners’]Skew Button[/button][/content_box][/column][/container][container collapse=’false’ fullwidth=’no’][column type=’12’ last=’1′][raindrops bgcolor=’#ffffff’ flip=’1′][/raindrops][/column][/container][container section_title=’Scalable Multipurpose Theme’ fullwidth=’yes’ bgimage=’http://bravio.co/demos/default/wp-content/uploads/2017/11/picjumbo.com_HNCK56ff44.jpg’ scrolltype=’scroll’ bgpattern=’8′ bgcolor=’accent’ bgtransparency=’45’ gradientstart=’#000000′ gradientend=’accent’ gradtype=’left’ top=’82’ bottom=’65’ innerbottomshadowsize=’0′ bordertop=’0′ borderbottom=’0′ topseparator=’disable’ topseparatorshape=’diagonal’ bottomseparator=’disable’ bottomseparatorshape=’diagonal’ collapse=’false’][column type=’9′][separator marginTop=’5′][/separator][text google_font=” fontfamily=’Raleway’ fontweight=’300′ textshadow=” fontsize=’32’ lineheight=’38’ color=’#fff’]Scalable Multipurpose Theme[/text][text google_font=” fontfamily=’Raleway’ fontweight=” textshadow=” fontsize=’22’ lineheight=’32’ color=’#fff’]Improve quality of your website by using its powerful features.[/text][/column][column type=’3′ last=’1′ align=’right’][separator margintop=’13’][/separator][button link=’#’ size=’xlarge’ shape=’round’ hovereffect=’bounce-to-right’ bgcolor=” bgovercolor=’#fff’ bgtransparency=’30’ bordertransparency=’80’ textcolor=’#FFFFFF’ textovercolor=’#FFFFFF’ textshadow=” fontweight=’300′ fontfamily=’Raleway’ border=’2′ bordercolor=’#fff’ borderovercolor=” bggradstart=” bggradend=” icon=” iconposition=” target=’_blank’]Explore Features[/button][/column][/container]