How to create a heart shape button with rollover effect to replace add to facvorites in opencart theme

Question

We are trying to replace the add to favorites button with a heart shaed css button something like on FAB.com

The code the create a heart shape css is

this cs

<!DOCTYPE html> 
<html> 
  <head> 
    <title>Creating Heart using CSS3 </title> 
    <style type="text/css"> 
      #heart { 
        position: relative; 
        width: 100px; 
        height: 90px; 
      } 

      #heart:before, #heart:after { 
        position: absolute; 
        content: ""; 
        left: 50px; 
        top: 0; 
        width: 50px; 
        height: 80px; 
        background: red; 
        border-radius: 50px 50px 0 0; 
        -webkit-transform: rotate(-45deg); 
        -moz-transform: rotate(-45deg); 
        -ms-transform: rotate(-45deg); 
        -o-transform: rotate(-45deg); 
        transform: rotate(-45deg); 
       -webkit-transform-origin: 0 100%; 
       -moz-transform-origin: 0 100%; 
       -ms-transform-origin: 0 100%; 
       -o-transform-origin: 0 100%; 
       transform-origin: 0 100%; 
     } 

      #heart:after { 
        left: 0; 
        -webkit-transform: rotate(45deg); 
        -moz-transform: rotate(45deg); 
        -ms-transform: rotate(45deg); 
        -o-transform: rotate(45deg); 
       transform: rotate(45deg); 
       -webkit-transform-origin: 100% 100%; 
       -moz-transform-origin: 100% 100%; 
       -ms-transform-origin: 100% 100%; 
       -o-transform-origin: 100% 100%; 
       transform-origin :100% 100%; 
     } 
  </style> 
</head>

HTML :

<body> 
      <div id="heart"></div> 
    </body> 
    </html>

Now to make it possible where if the person has made it a favorite it stays red but without rollover its just a red border around the heart.

Answer 1

I'm not css expert, but here's my idea:

use both:

.heart and .heartwhite

working example: http://jsfiddle.net/nwznn/

But if you ask me, I Would stick to images

How to create a heart shape button with rollover effect to replace add to facvorites in opencart theme

Question

1 answers

solution1
1 2013-06-25 12:45:09

How to create a heart shape button with rollover effect to replace add to facvorites in opencart theme

Question

1 answers

solution1 1 2013-06-25 12:45:09

solution1
1 2013-06-25 12:45:09