Link to home
Start Free TrialLog in
Avatar of Redscrapbook
RedscrapbookFlag for Ireland

asked on

CSS button triangle side left and round corner right on HOVER

I'm trying to create on HOVER the cyan colour of the triangle part of a button, I managed to create cyan on the main button?

Have a peek jsfiddles
Avatar of Tom Beck
Tom Beck
Flag of United States of America image

Just curious as to why you are using svg instead of doing a simple image swap on hover.
Avatar of Redscrapbook


Why? I'd like the option of changing the colours quickly and/or enlarge the css size at a later date than going back to Photoshop to create a whole button.

The svg is the home icon with a house. I'll reuse the same css with different icon e.g. back icon for 2nd level navigation? I hope I make sense?
e.g. home_icon and back_icon of CSS.

The same svg colour will be left as it is. Then, use different colour e.g: yellow and cyan (hover).

What I've last night is perfect. I just need to add more pointy traingle on left to make it obvious that is back to home page. Do I make sense?

I've tried existing css but I could not create a pointy part?

The existing url for your information.
Did you take down your site? Link no longer works.
Oh, I'll put it back up and its up now. Sorry about that.
Mmm, I didn't hear from you since?
It's the weekend and we just got power back after 12 days since the hurricane so there's a lot of neglected work to catch up on around the house. Sorry for the delay. I'll try to get to this a little later.
Oh dear, so that mean you're living in affected area where that awful hurricane last week? I was watching the news live and we never have this kind of hurricane or super storm in Ireland. I've no idea that you're based in US? Don't worry take your time. Your house come first.
Avatar of Tom Beck
Tom Beck
Flag of United States of America image

Link to home
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
It is excellent and intelligent solution, it is simple, only if you know how. I've tried a triangle earlier and it did not work on the iphone. So two separate elements and anchor solution that does it.

Thank you for taking your time on a weekend and in the middle of trying to get your house back in order and getting back to normality. I hear that there's people still without electricity.
Yes, still people without power. My area is good now though. Today is beautiful, 70 degrees, sunny. Strange weather for November.

Thanks for the points.