Showcase Team Button Shape Options

Ask the Community Customization
1

Hi, if would be great to have the option to change the button shape for the CTA button.

2

Hi @Jasmine_Gilliam
do you mean the CTA Button in the Team Showcase Widget ?
You can create a workaround with custom CSS code.

3

Is there a tutorial for custom CSS coding?

1 Like
4

@Jasmine_Gilliam
:blush: The community is the treasure trove.

CSS Codes

Do you mean the CTA Button right? I think I overlooked it :relieved_face:

.eapp-team-showcase-cta-button{

}
5

@Jasmine_Gilliam this is an example :raising_hands:

Add this code to the Custom CSS field on the Style tab of your Team Showcase widget’s settings:

and take a look !

.eapp-team-showcase-cta-button{
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  border: none;
  box-shadow: 5px 3px 4px 0px rgba(34, 60, 80, 0.2);
}
6

Thank you Sina,

I attempted the code but I don’t see how I can input to change the shape of the CTA button.

1 Like
8

Hi there, @Jasmine_Gilliam :wave:

I’ve noticed that you’ve added the code to the widget with the quote parts, this is why your code doesn’t work:

image
image332×306 7.18 KB

I’ve removed the quote from your widget and now everything is fine.

The code shared by Sina applies shadow and gradient background to the button. If you want to change the button shape, you can use this code to adjust the border radius:

.eapp-team-showcase-cta-button { 
  border-radius: 40px;
}

image
image1851×983 67.7 KB


Please try it out and let me know if you like the result :slightly_smiling_face:

1 Like
9

It worked! Thank you

1 Like
10

Great, you’re welcome :slightly_smiling_face:

1 Like