1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

CSS Button effects not working across browsers

Discussion in 'HTML & Website Design' started by 7643sfsag6, Dec 29, 2019.

  1. #1
    Having a few issues with a CSS Button effects not working across browsers.

    It displays as I would like it in Chrome, but not Firefox.

    Can't seem to find the root of the problem. Here is what I have.

    Fiddle
    SEMrush
    <a class="soft">Button</a>
    Code (markup):
    a.soft {display: inline-block;font-family:'Varela Round', sans-serif;padding:2rem3rem;font-size:1.25vw;box-shadow:-10px-10px20px0#E6E6E6,10px10px20px0#ABABAB, inset 10px10px20px0#E6E6E6, inset -10px-10px20px0#ABABAB;border-radius:50px;transform: box-shadow 1s ease-in-out;background-color:#666666;-webkit-background-clip: text;color: transparent;text-shadow: rgba(245,245,245,1.0)2px2px5px;font-weight: bolder;}
    
    a.soft:hover {background-color:#ddd;box-shadow:-10px-10px20px0#E6E6E6,10px10px20px0#ABABAB, inset 10px10px20px0#E6E6E6, inset -10px-10px20px0#ABABAB;color:#888;}
    
    a.soft:active {box-shadow:0020px0#E6E6E6,0020px0#ABABAB, inset 0020px0#E6E6E6, inset 0020px0#ABABAB;color:#D8D8D8;text-shadow:1px1px2px white;-webkit-background-clip: text;font-weight: bolder;}
    Code (CSS):
     
    7643sfsag6, Dec 29, 2019 IP
    SEMrush
  2. hdewantara

    hdewantara Well-Known Member

    Messages:
    462
    Likes Received:
    40
    Best Answers:
    21
    Trophy Points:
    130
    #2
    It looks like you need to add some spaces. For example, Firefox should understand following syntax:
    padding:2rem 3rem;
    Code (CSS):
    but, not
    padding:2rem3rem;
    Code (CSS):
     
    hdewantara, Dec 29, 2019 IP
    deathshadow likes this.
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,105
    Likes Received:
    1,691
    Best Answers:
    239
    Trophy Points:
    515
    #3
    Exactly this! You cannot blindly strip out ALL the spaces in your CSS. Generally if this is a production code and not deployment, derping everything with no spaces into a single line is an epic /FAIL/ at even trying to use CSS.

    Also why I generally consider CSS minification to range from silly to outright idiotic. If it makes any sort of "real" difference in a page, you're using more CSS than you should even have.

    Gets really bad with this one:
    box-shadow:0020px0#E6E6E6

    Also if your fourth box-shadow parameter is zero, you don't need to state it... and it would help if you included the non -webkit version of background-clip if you want to set background-clip.. and you don't need to re-state it on the pseudo-state if you state it on the non-state tag.

    
    a.soft {
    	display:inline-block;
    	font-family:'Varela Round', sans-serif;
    	padding:2rem 3rem;
    	font-size:1.25vw;
    	box-shadow:
    		-10px- 10px 20px 0 #E6E6E6,
    		10px 10px 20px 0 #ABABAB,
    		inset 10px 10px 20px 0 #E6E6E6,
    		inset -10px -10px 20px 0 #ABABAB;
    	border-radius:50px;
    	transform: box-shadow 1s ease-in-out;
    	background-color:#666666;
    	-webkit-background-clip: text;
    	background-clip:text;
    	color:transparent;
    	text-shadow:2px 2px 5px rgba(245,245,245,1.0);
    	font-weight:bolder;
    }
    
    a.soft:focus {
    a.soft:hover {
    	background-color:#DDD;
    	box-shadow:
    		-10px -10px 20px 0 #E6E6E6,
    		10px 10px 20px 0 #ABABAB,
    		inset 10px 10px 20px 0 #E6E6E6,
    		inset -10px -10px 20px 0 #ABABAB;
    	color:#888;
    }
    
    a.soft:active {
    	box-shadow:
    		0 0 20px 0 #E6E6E6,
    		0 0 20px 0 #ABABAB,
    		inset 0 0 20px 0 #E6E6E6,
    		inset 0 0 20px 0 #ABABAB;
    	color:#D8D8D8;
    	text-shadow:1px 1px 2px white;
    }
    Code (markup):
    Should be closer to working... whoever told you that spaces could be stripped ENTIRELY was packing your fudge.
     
    deathshadow, Dec 29, 2019 IP
  4. 7643sfsag6

    7643sfsag6 Member

    Messages:
    53
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    43
    #4
    thanks both.

    I corrected what you recommended.

    It worked perfectly after adding a firefox specific rule:
    @-moz-document url-prefix() {
    a.soft {
    background-color: #ddd;
    box-shadow: -10px -10px 20px 0 #E6E6E6,
    10px 10px 20px 0 #ABABAB,
    inset 10px 10px 20px 0 #E6E6E6,
    inset -10px -10px 20px 0 #ABABAB;
    color: #888;
    }
    }
     
    7643sfsag6, Dec 30, 2019 IP
  5. Dandil

    Dandil Peon

    Messages:
    11
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #5
    Thank you, worked for me, hope this is a unique solution for everyone
     
    Dandil, Jan 8, 2020 IP