CSS getting completely removed by Chrome Browser-CodePudding

Only half of these are actually being applied!

.btn{
    background-color: darkorange;
    color: white;
    text-decoration: none;
    border: 2px solid transparent;
    font-weight: bold;
    padding: 10x 25px;
    border-radius: 30px;

Any Ideas

CodePudding user response：

Check if it’s being overruled by CSS specificity.

You can try to override the specificity using

!important

CodePudding user response：

I created an anchor tag with .btn class. and use your css I made only one important changes. after this changes all css property is working.

Displays an element as an inline element (like <a>). Any height and width properties will have no effect. so I did set display:inline-block; because The element itself is formatted as an inline element, but you can apply height and width values

.btn{
    background-color: darkorange;
    color: white;
    text-decoration: none;
    border: 2px solid transparent;
    font-weight: bold;
    padding: 10px 100px;
    border-radius: 30px;
    display: inline-block;
}

if it is helpful for you let me know.