[Support request] Button CSS

[Chris]

Best support,

I have 2 different price tables, with different colors.

I have adjusted the css of the header and the button.

Each in a different color.

See: https://www.chrisbuis.nl/test/

But I am afraid that I have used too many css, and that it can do less.

It concerns: header and header2, and button.chris and button.chris2

Can the css less?

C.S.S:

.header {
    background-color: #4caf50;
    color: white;
    font-size: 25px;
}

.header2 {
    background-color: #333555;
    color: white;
    font-size: 25px;
}

.button.chris,
.button.chris:visited {
    padding: 10px 45px;
    border-radius: 4px;
	background: #4caf50;
	color:#FFF;
}

.button.chris:hover,
.button.chris:active {
    padding: 10px 45px;
    border-radius: 4px;
	background: #108e15;
	color:#FFF;
}

.button.chris2,
.button.chris2:visited {
    padding: 10px 45px;
    border-radius: 4px;
	background: #333555;
	color:#FFF;
}

.button.chris2:hover,
.button.chris2:active {
    padding: 10px 45px;
    border-radius: 4px;
	background: #03084f;
	color:#FFF;
}

[David]

Hi there,

you could consolidate matching properties for different selectors, and you don’t need to apply repeat properties to :pseudo classes e.g

.header, .header2  {
    background-color: #4caf50;
    color: white;
    font-size: 25px;
}

.header {
    background-color: #4caf50;
}

.header2 {
    background-color: #333555;
}

.button.chris,
.button.chris:visited {
    padding: 10px 45px;
    border-radius: 4px;
	background: #4caf50;
	color:#FFF;
}

.button.chris:hover,
.button.chris:active {
	background: #108e15;
}

.button.chris2,
.button.chris2:visited {
	background: #333555;
}

.button.chris2:hover,
.button.chris2:active {
	background: #03084f;
}

[Chris]

Thanks David, I just adjusted the css! 👍

[David]

Glad i could help

[Chris]

Hi David, can I make a class for centering?
For example:

.center1 {
  text-align: center;
}

<h2 class="center1>Lorem ipsum dolor sit amet</h2>

[David]

Yes, but you have a missing ” on that H2 tag after the class.

[Chris]

Hahaha, yes I see it! Thanks David 👍

[Author]

Posts