Archived topic

Button CSS

6 replies · Started by Chris on September 8, 2018

Viewing posts 1–7 of 7

September 8, 2018 at 7:25 am #671846

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;
}

September 8, 2018 at 4:12 pm #672159

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;
}

September 9, 2018 at 4:07 pm #672807

Thanks David, I just adjusted the css! 👍

September 9, 2018 at 4:18 pm #672817

Glad i could help

September 10, 2018 at 12:49 am #672964

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

.center1 {
  text-align: center;
}

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

September 10, 2018 at 4:19 am #673094

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

September 10, 2018 at 4:22 am #673097

Hahaha, yes I see it! Thanks David 👍

This archived topic is closed to new replies.

Start building better websites today.