css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

UPDATE:

Here are some useful mixins to help you create & customize your own buttons:

  1. Draw
  2. Draw meet

Check out my button collection for more.

Comments

  1. Hey Giana!

    I'm trying to do something like your Draw Meet button boarder effect, but I need the border to start from the bottom left and go up and right... Would you know how to achieve that/ is it even possible?

    Love the stuff you do, keep it up :D

  2. Nice work Quick question on your DRAW MEET from the bottom right corner instead or any way to make it easy to pick any corner?

    Cheers

  3. @mikesoden @hderaps

    Made a mixin for this: http://codepen.io/giana/pen/xdXpJB

    You can now pass the originating direction as top/bottom and left/right.

  4. @giana, thanks for that, it's awesome. Cheers!

  5. @giana

    I wanted to have this effect but with rounded corner...

    Even if I barely understand your construction, I figured out it would be hard as with border-radius it brakes everything but some idea came to my mind...

    Why not combining all the animation ?

    Here is my attempt and I apologize for my rought coding maybe you could explain me your technique ;-) (would love a tuto about this)

    https://codepen.io/1conu59/pen/RZgdJY

  6. @1conu59 That's pretty clever! Yes, border-radius presents a big challenge. Need to do some thinking about how it could be accomplished.

  7. Can i use in Wordpress?

  8. @jvera Yup, you can use it however you want.

  9. Great, Thanks for the wonderful code

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.
Loading...
Loading...