Fancy Hover Button

  • A little different from the lecture itself, I've arranged Colt's non-explanation and incorporation of the FlexBox things (like viewport height, display:flex etc...) as below. The hover button on this page currently exists in its own section, so as not to destroy the current presentation of the page. 
                    
                    section {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        height:100vh;
                        background-color:#1f1b29;
                    }
  • The <button> CSS needs a little explanation. As well as the customized Google Font, the background of the button is set to none (so it's basically transparent now!) The color and border properties are self-explanatory! To space out the button in a way that allows it to scale up or down, padding of 1em and 2em has been added (vertical horizontal). Speaking of scaling, the font-size is set to 1em, rather than an absolute value. 
                    
                    button {
                        font-family: 'Roboto', sans-serif;
                        background: none;
                        color: #ffa260;
                        border: 2px solid;
                        padding: 1em 2em; /*1em top and bottom, 2em left and right*/
                        font-size: 1em; /*Allows the button's font to scale up or down as necessary*/
                    }
  • Can you work out what effects have been done to the button below? Just focus on the button itself, none of the rest!
  • The most obvious change is the pseudo-class :hover. The border-color and internal text color have been changed (light inside of darker gives it the appearance of glowing from within). More complex is the box-shadow property, which is new! The CSS shorthand shows the x-offset, y-offset, blur-radius, spread-radius, and color. It gives quite the effect when you hover! 
                    
                    button:hover {
                        border-color: #f1ff5c;
                        color: white;
                        box-shadow: 0 0.5em 0.5em -0.4em #f1ff5c;
                    }
  • The performance-effective way of moving the button is to use transform! Since we want the button to jump up a little, we could use transform:translate(0,-0.25em); I opted for the alternative (because the teacher did!). Finally, to avoid an instantaneous change, we can use transition(). It's bad practice to just use transform:all 0.25s;, so the properties are listed! The cursor:pointer; option makes it REALLY obvious that we can interact with this button! 
                    
                    button:hover {
                        border-color: #f1ff5c;
                        color: white;
                        box-shadow: 0 0.5em 0.5em -0.4em #f1ff5c;
                        transform:translateY(-0.25em);
                        transition:color 0.25s, border-color 0.25s, box-shadow 0.25s, transform 0.25s;
                        cursor:pointer;
                    }

    • Let's move on to Background and Google Fonts