CSS button styles - html

Question

I am a beginner in html and I have problem with css button styles.
I can understand .button code
please discribe me to above code that I rounded in red colour border.
Some help from anyone know about html and css

Answer 1

So what you're looking at are different kinds of selectors for CSS.
They're a way of targeting different parts of your HTML.
First example
.button span {
...
}
This is possibly the most common usage of selectors, called "decedents".
.button span "means" HTML with the "button" class and has a descendant span element
So it would look like this:
.button span {
color: red
}
<button class="button">
Button Text
</button>
<button class="button">
Some text
<br />
<span>I'm Red</span>
</button>
<button>
Some text
<span>I'm not Red</span>
</button>
Second example
.button span:after uses the aforementioned descendent selector but also combines it with the "and" selector... that's the span:after part!
Any selectors written with a : before them are called "pseudo-elements". They can be from mouse events (such as :hover), or they can things like the :before or :after pseudo-elements.
.button span:hover {
color: red;
}
<button class="button">
Button Text
</button>
<button class="button">
<span>I'm Red when you hover on me</span>
<br/>
But I will never be red when you hover
</button>
<button>
<span>I'm not Red when you hover</span>
</button>
<div class="button">
<span>I will be red when you hover on me</span>
</div>
CSS can be tricky, its a big world out there!
Be sure to check out MDN Documentation or W3Schools as they have some really good interactive examples.