How can I improve the design and size of my website banner buttons?

[Tanel]

Hi,

please look my website www.tanelwardrobe.com 
I would like to have my banner buttons looks both same design, outstanding and a bit bigger

Thanks.

[Made4uo-Ribe]

Hi @Tanel 

Do you mean the banner button?It looks same design.

Can you explain further what design you like to get? Thanks!

[Tanel]

 Yes i figured how to make them same. Now i would add them some designe, they look more outstanding. Also text top of buttons make vizually better.

[Made4uo-Ribe]

Oh ,Okay. check this one.

• From your Shopify admin dashboard, click on "Online Store" and then "Themes".
• Find the theme that you want to edit and click on "Actions" and then "Edit code".
• In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

a.button.button--secondary:before, a.button.button--secondary:after {
    border-radius: 20px;
}
a.button.button--secondary {
    border-radius: 20px;
    font-weight: 900;
}
a.button.button--secondary:hover {
    background: linear-gradient(to right, white, black);
    animation: shake 0.5s ease-in-out;
}
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25%, 75% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
}
#Banner-template--21352671052117__image_banner > div.banner__content.banner__content--middle-center.page-width.scroll-trigger.animate--slide-in > div > div.banner__buttons.banner__buttons--multiple > a:nth-child(2):hover {
    background: linear-gradient(to right, black, white);
}

• And Save.
• Result:
• 
• I add some animation, hope you like it. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[theycallmemakka]

Hi @Tanel ,

To make the buttons more attractive, please add below CSS.

<style>
#Banner-template--21352671052117__image_banner a.button.button--secondary {
    border-radius: 25px;
    border: 2px solid #fff;
    font-size: 17px;
    font-weight: bold;
    border-radius: 25px;
    min-width: 22rem;
}
#Banner-template--21352671052117__image_banner a.button.button--secondary::before{
  background: #df1b08;
  opacity: 0.9;
  border-radius: 25px;
}
#Banner-template--21352671052117__image_banner a.button.button--secondary::before ,
#Banner-template--21352671052117__image_banner a.button.button--secondary::after,
#Banner-template--21352671052117__image_banner a.button.button--secondary:hover::after,
#Banner-template--21352671052117__image_banner a.button.button--secondary:hover::before{
    box-shadow:none!important;
}



@media screen and (min-width: 750px){
  #Banner-template--21352671052117__image_banner a.button.button--secondary {
       min-height: calc(5.3rem + var(--buttons-border-width) * 2);
    }  
}

</style>

[Tanel]

looking very nice at desktop version. Mobile is still buttons same. Please help.

[Tanel]

Need still help, please.

[BSS-Commerce]

Hi @Tanel ,

You can change the font size, font styles, and text borders according to your preference.

Here is an example:

.banner__text.rte.subtitle strong {
    font-size: 2.2em;
    text-shadow: 10px 10px 25px rgb(155 155 155), -10px 10px 25px rgb(155 155 155), -10px -10px 25px rgb(155 155 155), 10px -10px 25px rgb(155 155 155);
}
.banner__buttons.banner__buttons--multiple a {
    font-weight: bold;
}

 Hope it helps @Tanel