Do you use CodePen?
What is CodePen?
CodePen is a social development environment for front-end designers and developers. Build and deploy a website, show off your work, build test cases to learn and debug, and find inspiration.
CodePen is a playground for the front end side of the web. It's all about inspiration, education, and sharing.
![CodePen media 1](https://ph-files.imgix.net/aab2ea86-3dc7-4b4a-8d43-7ada84df609c.jpeg?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=256&h=160&fit=crop)
![CodePen media 2](https://ph-files.imgix.net/213e8684-3d7f-4d30-bf20-b3c4bdd0245f.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=256&h=160&fit=crop)
![Afforai](https://ph-files.imgix.net/1dd6ccd5-4e6a-4525-8660-9e6a963c2c51.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=60&h=60&fit=max)
Afforai
AdCite, Annotate, and Research with AI
Recent launches
CodePen: Online Code Editor
Build, share, and learn JavaScript, CSS, and HTML with our online code editor.
Button CSS Based on real World
Free Design and code 4 states of a button based on laws #1 & #2 of Heuristic Evaluation.
You can read about this in my Medium profile named @amirtaqiabadi
![Button CSS Based on real World image](https://ph-files.imgix.net/0944a445-2545-4e68-956a-7a0a98eedbe7.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=150&h=90&fit=crop)