• GoDaddy Community
  • GoDaddy Website Builders
  • GoDaddy Website Builders

    cancel
    Showing results for 
    Show  only  | Search instead for 
    Did you mean: 
    Go to solution
    SantaBroo
    Getting Started

    Custom HTML buttons

    So I wanted to add this button with "Hover Me" effect that I found. But its in scss and pug. How to change it to make it compatible with Custom HTML section at Website Builder ?

     

    Link to code : https://codepen.io/joshuaward/pen/aQXLPa

    3 ACCEPTED SOLUTIONS
    Nate
    Super User I

    PUG would need to be converted to HTML and SCSS converted to CSS.  There are many tools that do this automatically if you want to refer to your favorite search, here are a couple I found.

    https://pughtml.com/

    https://jsonformatter.org/scss-to-css

     

    View solution in original post

    The <center> tag is depreciated, CSS should be used instead.

     

    The original code assumes it would be the only thing in the section, with "body" as the direct parent of ".hovera".  With it nested in a table a different container needs to be used.  If the whole column is going to be the button you can target that instead of "body" with

     

    tbody .column5 { ... }

     

    Then anything that needs to be different on smaller screens needs to be overwritten in the media query section.

     

    @media(...){

    ...

        tbody .column5 {

            align-items: flex-start;

            justify-content: flex-start;

        }

    ...

     

     

    }

    View solution in original post

    Yes, you can add padding to "tbody .column5".

     

    I also have a correction to note.  Left is not a valid property for positioning a flex container, changed to "flex-start" above.

    View solution in original post

    7 REPLIES 7
    Nate
    Super User I

    PUG would need to be converted to HTML and SCSS converted to CSS.  There are many tools that do this automatically if you want to refer to your favorite search, here are a couple I found.

    https://pughtml.com/

    https://jsonformatter.org/scss-to-css

     

    View solution in original post

    SantaBroo
    Getting Started

    Thanks, that helped a lot. Can you just help me now, since i removed this part of the code (because it interferred with other parts of the code)



    *, *:before, *:after {
    	 box-sizing: border-box;
    	 outline: none;
    }
    body {
    	 position: relative;
    	 display: flex;
    	 align-items: center;
    	 justify-content: center;
    	 width: 100%;
    	 height: 100vh;
    	 background-color: #bdc3c7;
    }

     from this code:

    *, *:before, *:after {
    	 box-sizing: border-box;
    	 outline: none;
    }
    body {
    	 position: relative;
    	 display: flex;
    	 align-items: center;
    	 justify-content: center;
    	 width: 100%;
    	 height: 100vh;
    	 background-color: #bdc3c7;
    }
     .hover {
    	 position: relative;
    	 display: flex;
    	 align-items: center;
    	 justify-content: center;
    	 width: 300px;
    	 height: 75px;
    	 background-color: #4db6ac;
    	 border-radius: 99px;
    	 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    	 transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    	 overflow: hidden;
    }
     .hover:before, .hover:after {
    	 position: absolute;
    	 top: 0;
    	 display: flex;
    	 align-items: center;
    	 width: 50%;
    	 height: 100%;
    	 transition: 0.25s linear;
    	 z-index: 1;
    }
     .hover:before {
    	 content: '';
    	 left: 0;
    	 justify-content: flex-end;
    	 background-color: #4db6ac;
    }
     .hover:after {
    	 content: '';
    	 right: 0;
    	 justify-content: flex-start;
    	 background-color: #44a69c;
    }
     .hover:hover {
    	 background-color: #46627f;
    	 box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
    }
     .hover:hover span {
    	 opacity: 0;
    	 z-index: -3;
    }
     .hover:hover:before {
    	 opacity: 0.5;
    	 transform: translateY(-100%);
    }
     .hover:hover:after {
    	 opacity: 0.5;
    	 transform: translateY(100%);
    }
     .hover span {
    	 position: absolute;
    	 top: 0;
    	 left: 0;
    	 display: flex;
    	 align-items: center;
    	 justify-content: center;
    	 width: 100%;
    	 height: 100%;
    	 color: whitesmoke;
    	 font-family: 'Fira Mono', monospace;
    	 font-size: 24px;
    	 font-weight: 700;
    	 opacity: 1;
    	 transition: opacity 0.25s;
    	 z-index: 2;
    }
     .hover .social-link {
    	 position: relative;
    	 display: flex;
    	 align-items: center;
    	 justify-content: center;
    	 width: 25%;
    	 height: 100%;
    	 color: whitesmoke;
    	 font-size: 24px;
    	 text-decoration: none;
    	 transition: 0.25s;
    }
     .hover .social-link i {
    	 text-shadow: 1px 1px rgba(70, 98, 127, 0.7);
    	 transform: scale(1);
    }
     .hover .social-link:hover {
    	 background-color: rgba(245, 245, 245, 0.1);
    }
     .hover .social-link:hover i {
    	 animation: bounce 0.4s linear;
    }
     @keyframes bounce {
    	 40% {
    		 transform: scale(1.4);
    	}
    	 60% {
    		 transform: scale(0.8);
    	}
    	 80% {
    		 transform: scale(1.2);
    	}
    	 100% {
    		 transform: scale(1);
    	}
    }
     

     

    Now how can I center this button or put it to the right. Since currently its to the left

    SantaBroo_0-1610995687752.png

     

     

    Add that back except for...

     

    height: 100vh;

     

    You can remove the background-color if you want it to be the same as the section.  You can also change the center property values to right if you want it on that side.

    SantaBroo
    Getting Started

    Nope it still doesnt work.

    SantaBroo_1-1611066094099.png

     

    The first button is where I didnt touch anything. The second is the one where I added <center> to each column. 

    The first button is ok on mobile devices (aligned to the left) but its bad on web.

    The second button is ok on pc (centered) but bad on mobile.

     

     

    Here is the code : https://pastebin.com/E8fNkds7

    The <center> tag is depreciated, CSS should be used instead.

     

    The original code assumes it would be the only thing in the section, with "body" as the direct parent of ".hovera".  With it nested in a table a different container needs to be used.  If the whole column is going to be the button you can target that instead of "body" with

     

    tbody .column5 { ... }

     

    Then anything that needs to be different on smaller screens needs to be overwritten in the media query section.

     

    @media(...){

    ...

        tbody .column5 {

            align-items: flex-start;

            justify-content: flex-start;

        }

    ...

     

     

    }

    View solution in original post

    SantaBroo
    Getting Started

    Thanks you for explaining it. It helped a lot, it also helped for some other problems I had.

     

    Just one more thing. Now it is not vertically aligned (it is sticked to the top). Should I just add padding for it ?

    Yes, you can add padding to "tbody .column5".

     

    I also have a correction to note.  Left is not a valid property for positioning a flex container, changed to "flex-start" above.

    View solution in original post