Enlarging dot on hover (beginner)

[PinkMeNow 3 Likes (Newbie)]

I have a click button that after click sends calendar entry to the user.

What I'm trying to achieve is that dot in the middle scales up over letter radius on mouse hover.

 

I've tried several approachesnow but for some reason I cannot do it.

 

This is my code:

TweenMax.to(".innerletters, .outerletters, .roundbutton", 8, {opacity:1, delay:7});
TweenMax.to(".innerletters", 32, {css:{rotation:-360, transformOrigin:'50% 50%'},ease:Linear.easeNone,repeat: -1,paused: false});
TweenMax.to(".outerletters", 22, {css:{rotation:-360, transformOrigin:'50% 50%'},ease:Linear.easeNone,repeat: -1,paused: false});
function hoverOn () {
var ttt = new TimelineMax({repeat:-1});
ttt.to(".roundbutton", 2, {fill: '#F15D2E'})
ttt.to(".roundbutton", 2, {fill: '#EEBC27'}, "+=1")
ttt.to(".roundbutton", 2, {fill: '#8DC641'}, "+=1")
ttt.to(".roundbutton", 2, {fill: '#F15D2E'}, "+=1")
}

 

See the Pen XOzWGv by drol (@drol) on CodePen

[elegantseagulls 209 Likes (Specialist)]

You'll want to setup a timeline that's paused and will play, or reverse, on hover. I added a quick TL and hover function to your pen, you'll likely want to tweak to get the overall feel the way you like.

 

See the Pen Vgraxg?editors=1111 by ryan_labar (@ryan_labar) on CodePen