Tagged: button, call to action, cta, hover
-
AuthorPosts
-
October 26, 2018 at 11:34 am #1026712
Hi,
how is the “double button” (“view themes – learn more”) at the KRIESI homepage done please?
Do you have a code snippet (from the ALB debug more for example), to re-construct/import this style in my own site?
Thanks.
October 26, 2018 at 5:58 pm #1026897Hey Gitte,
This was actually made by the devs via custom css. There is no snippet or ALB for it unfortunately. Perhaps you can inspect the code and css via the browser to get an idea on how they pulled it off. Thats usually a great place to start.
Best regards,
Jordan ShannonJuly 13, 2019 at 8:37 pm #1118392Yah this is very disappointing and misleading to put this feature on your site but not offer the element to use to your customers :(
July 13, 2019 at 9:52 pm #11184021) make a: Fullwidth Easy Slider
2) choose slide-show transition : fade
3) place an image and put html-code into : caption – caption text field:
<div>A subheading line included before the buttons</div><div class="avia-double-buttons "><a href="https://kriesi.at/themes/enfold-overview/" class="avia-double-button avia-double-button-1">View Demos</a><span class="button_or">or</span><a href="https://themeforest.net/item/enfold-responsive-multipurpose-theme/4519990?ref=Kriesi" class="avia-double-button avia-double-button-2">Purchase Now</a></div>
(put it in without line-breaks !)
As you see – you can add infront of the buttons a subheading line!4) put this to your quick css:
.avia-double-buttons { margin-top: 30px; text-align: center; position: relative; } #top #wrap_all .avia-slide-wrap .avia-double-button, #top #wrap_all .avia-hover-fx .avia-double-button { background: rgba(0,0,0,0.2); border-color: #fff; color: #fff; padding-bottom: 11px; text-decoration: none; } #top .avia-double-button { letter-spacing: 1px; padding: 13px 20px; padding-bottom: 13px; text-transform: uppercase; font-size: 13px; text-align: center; min-width: 175px; display: inline-block; transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; border: 4px solid #fff; border-top-color: rgb(255, 255, 255); border-right-color: rgb(255, 255, 255); border-right-width: 4px; border-bottom-color: rgb(255, 255, 255); border-left-color: rgb(255, 255, 255); text-decoration: none; } #top .avia-double-button-1 { border-top-left-radius: 100px; border-bottom-left-radius: 100px; border-right-width: 2px; } #top .button_or { position: absolute; display: block; height: 26px; line-height: 21px; width: 26px; text-align: center; top: 50%; left: 50%; margin: -13px 0 0 -14px; background: #fff; color: #666; border-radius: 100px; font-size: 10px; border: 2px solid #FFF; font-style: italic; font-weight: 600; z-index: 11; } #top .avia-double-button-2 { border-top-right-radius: 100px; border-bottom-right-radius: 100px; border-left: none; border-left-color: currentcolor; } /** if you like to have different hover colors **/ #top #wrap_all .main_color .avia-slide-wrap .avia-double-button-1:hover, #top #wrap_all .main_color .avia-hover-fx .avia-double-button-1:hover { background: rgba(0, 100, 190, 0.6); color: #fff; } #top #wrap_all .main_color .avia-slide-wrap .avia-double-button-2:hover, #top #wrap_all .main_color .avia-hover-fx .avia-double-button-2:hover { background-color: rgba(200,0,120,0.6); color: #fff; }
for responsive behavior – test what fits best as width value:
@media only screen and (max-width:767px) { .responsive #top .avia-double-button { width:50%; min-width:50%; margin:0 } }
July 14, 2019 at 6:03 am #1118446July 14, 2019 at 6:40 pm #1118511Thanks, Guenni, but I meant ONLY the double button, no sliders, no images, for using only the button for example within a text(block).
July 14, 2019 at 10:49 pm #1118600Hi,
It can be styled via css. It’s just not one of the default elements. The browser inspector will supply the exact styles.
Best regards,
Jordan ShannonJuly 14, 2019 at 11:39 pm #1118629And dear Gitte you aren’t able to transmit the more complicated case to an easier one?
the html code is above – put it in a text-block or code block element – the rest only had to be adjusted to not specific for sliders:.avia-double-buttons { margin-top: 30px; text-align: center; position: relative; } #top #wrap_all .avia-double-button, #top #wrap_all .avia-double-button { background: #000; background: rgba(0,0,0,0.4); border-color: #fff; color: #fff; padding-bottom: 11px; text-decoration: none; } #top .avia-double-button { letter-spacing: 1px; padding: 13px 20px; padding-bottom: 13px; text-transform: uppercase; font-size: 13px; text-align: center; min-width: 175px; display: inline-block; transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; border: 4px solid #fff; border-top-color: rgb(255, 255, 255); border-right-color: rgb(255, 255, 255); border-right-width: 4px; border-bottom-color: rgb(255, 255, 255); border-left-color: rgb(255, 255, 255); text-decoration: none; } #top .avia-double-button-1 { border-top-left-radius: 100px; border-bottom-left-radius: 100px; border-right-width: 2px; } #top .button_or { position: absolute; display: block; height: 26px; line-height: 21px; width: 40px; text-align: center; top: 50%; left: 50%; margin: -13px 0 0 -22px; background: #fff; color: #666; border-radius: 100px; font-size: 12px; border: 2px solid #FFF; font-style: italic; font-weight: 600; z-index: 11; } #top .avia-double-button-2 { border-top-right-radius: 100px; border-bottom-right-radius: 100px; border-left: none; border-left-color: currentcolor; } #top #wrap_all .main_color .avia-double-button-1:hover, #top #wrap_all .main_color .avia-double-button-1:hover { background: rgba(0, 100, 190, 0.6); color: #fff; } #top #wrap_all .main_color .avia-double-button-2:hover, #top #wrap_all .main_color .avia-double-button-2:hover { background-color: rgba(200,0,120,0.6); color: #fff; } @media only screen and (max-width:480px) { .responsive #top .avia-double-button { width:50%; min-width:50%; margin:0 } }
see test page
July 14, 2019 at 11:42 pm #1118630ps: on that case – you had to define the animation for those button container. That comes from slider description container. – but can be translated to it
July 15, 2019 at 5:44 am #1118676July 15, 2019 at 11:36 am #1118733a little more respectful, please, Guenni. I would not have asked if I could have get it alone.
And once again: I’m not a coder, Jordan, and I would not have asked if I had found it out with the DT from FF.July 15, 2019 at 8:46 pm #1118936if I had no respect for simple questions here, then I would be satisfied with hints at the solution approach. But I often mean to formulate precise instructions here. Some people may even be disturbed by the detail and illustrations – and many are not interested in a learning curve but just want to get the solution in the form of short snippets. But despite everything the questions are often not precise enough.
You presented me a picture of the slider above; then I mistakenly assumed that you wanted to achieve that. But in the end it’s not much different than the described procedure, because as the mods here already indicated, it’s not an ALB element, but just like I indicated above simple html insertion and css styling. So please always try to be as specific as possible in your question in order to avoid superfluous solutions.July 16, 2019 at 3:41 am #1119018Hi,
Thanks for the feedback @gitte, please remember that @guenni007 is helping out on this support forum on his own time. He gets nothing in return for the time he spends here.
Best regards,
Rikard -
AuthorPosts
- You must be logged in to reply to this topic.