CODEWITHSUNDEEP
htmlcss
SDH
SDH

Reputation: 391

How to change styling of a <button> tag using CSS

I am really confused about why this code doesn't work for styling a button. Does anyone have any idea why this isn't working??

.button2 {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}
<div class="smallButtons" style="clear: both;">
	<button class="button2">ADD TO REGISTRY</button>
	<button class="button2">ADD TO LIST</button>
	<button class="button2">SHARE</button>
</div>

https://jsfiddle.net/865eg40w/#&togetherjs=6RiA5b06zJ

Upvotes: 0

Views: 143

Answers (6)

kravisingh
kravisingh

Reputation: 1670

On your fiddle there are some extra spaces before .button2 class. Just remove that and you will be done.

Upvotes: 2

FluffyKitten
FluffyKitten

Reputation: 14312

The problem is with the white space in your css. I have copied your css & html below and also made a duplicate copy that is identical in every way except for 2 things:

  • my css class is called .button22 (so we can test both classes in the same snippet)
  • I deleted all thw white space between the lines of your CSS and then added them back using the space bar.

Your CSS doesn't work, but my identical CSS except for the white space does - run the snippet and you'll see both rows of buttons.

.button2 {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}

.button22 {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;

}
<div class="smallButtons" style="clear: both;">
	<button class="button2">ADD TO REGISTRY</button>
	<button class="button2">ADD TO LIST</button>
	<button class="button2">SHARE</button>
</div>


<div class="smallButtons" style="clear: both;">
	<button class="button22">ADD TO REGISTRY</button>
	<button class="button22">ADD TO LIST</button>
	<button class="button22">SHARE</button>
</div>

As to why the whitespace in yours is breaking it, I can't answer, but I can tell you that replacing it will solve the problem!

Upvotes: 2

Aashish Kumar
Aashish Kumar

Reputation: 2879

.button2 { 
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    }
<button class="button2">
This is a Button
</button>

Put your button2 class in CSS file and add it in your HTML page.

Upvotes: 0

Yousaf
Yousaf

Reputation: 21

Try id instead of class in your html.

Upvotes: 0

user8530888
user8530888

Reputation:

Try open with other web browser

Upvotes: 1

Malathy Venkatesan
Malathy Venkatesan

Reputation: 213

Hope this will help you

<!DOCTYPE html>
<html>
<head>
<style>
.button2 { 
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    }
</style>
</head>
<body>

<button class="button2">
This is a Button
</button>

</body>
</html>

Upvotes: 0

Related Questions