[Support request] Button CSS

Home Forums Support [Support request] Button CSS

Home Forums Support Button CSS

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #671846
    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;
    }
    #672159
    David
    Staff
    Customer Support

    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;
    }
    #672807
    Chris

    Thanks David, I just adjusted the css! ๐Ÿ‘

    #672817
    David
    Staff
    Customer Support
    #672964
    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>
    
    #673094
    David
    Staff
    Customer Support

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

    #673097
    Chris

    Hahaha, yes I see it! Thanks David ๐Ÿ‘

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.