CODEWITHSUNDEEP
css
Simon
Simon

Reputation: 305

How to change a button from curved corner to sharp?

I need to change a button on my website's homepage from a curved edge to sharp.

It is a WordPress website and I am trying to add this code via Additional CSS window.

I tried to perform the below code, but it did not work. 

wobble-horizontal.shop-button.arrow-right.style2.black.bg-white
{ 
  border:3px solid #bada55;
}

enter image description here

Any suggestion on how to make the button sharp-edged?

Edit: I have just realised I haven't mentioned "a" class at the beginning. It should be a.wobble. Sorry for the confusion. enter image description here

Upvotes: 1

Views: 1736

Answers (4)

mwilson
mwilson

Reputation: 12910

Assuming that's just a div, it's as simple as setting the border-radius to 0px

Also, the library you're using could be high up in specificity, so you can also try border-radius: 0px !important; to try and force it.

Based on your border: 3px solid #bada55 line, I think you may have the wrong selector as that should be setting the border of that button a lime green and not gray.

#sharp {
  border-radius: 0px;
}

#not-sharp {
  border-radius: 10px;
}
div { background: red; margin: 10px; }
<div id="sharp">My Sharp Button</div>
<div id="not-sharp">My Not Sharp Button</div>

Upvotes: 2

Ali Mansour
Ali Mansour

Reputation: 55

border-radius: 0;

or border-radius: 0 !important; if your CSS is being overridden.

Upvotes: 1

Anis R.
Anis R.

Reputation: 6912

There seems to be another CSS script that is manipulating the border-radius property.

To have sharp borders, use:

border-radius: 0;

The code you were using just sets the border's thickness (3px), style (solid fill), and color(#bada55), not the radius.

If this does not do it, try tracing down what other CSS script is manipulating the border radius, or just use the !important directive to override:

border-radius: 0 !important;

Upvotes: 1

I_Adze
I_Adze

Reputation: 89

Setting border-radius to 0px should give you straight edges on the button

Upvotes: 0

Related Questions