Pattern Library

Buttons

Home

Enter

Button One: This design of button is a simple animation that uses key frames to achieve the arrow sliding out when the user hovers over the button. It is easily adaptable.

See the Pen NMyyGN by George Houghton (@TheM3xican) on CodePen.

Button Two: This button will change its text when the user is hovering over it, confirming that they have the correct button. It can be edited to fit perfectly. The button is activated at present through hover, not through click but this can be easily changed if the user wishes.

See the Pen Button 2 by George Houghton (@TheM3xican) on CodePen.

accepted

accept

Button Three: This button can be used to give the user feedback. When the button is clicked the text will change and let the user know that the button click was successful. It is only active if the user holds the button down, but this can be easily altered if desired,

See the Pen Button 3 by George Houghton (@TheM3xican) on CodePen.

  • Menu
  • Button Four: This design of button with animation is attractive on any site. The use of the hover and rotate function allows the lines to cross over and create the X. This can be easily edited to form a different shape if required.

    See the Pen Button 5 by George Houghton (@TheM3xican) on CodePen.

    Continue

    Button Five: This button is used to give the user feedback on whether they have pressed the button correctly. It is activated through the hover function, but this can be changed to the click function very easily if required as it is easily edited.

    See the Pen Button 6 by George Houghton (@TheM3xican) on CodePen.