marvinrusinek/devchallenges-button-component

Button Component

Button Component

Solution for a challenge from devChallenges.io.

Demo | Solution | Challenge

Table of Contents

• Overview
  • Built With
• Features
• Contact

Overview

Screenshot:

• Live demo can be found here: https://devchallenges-button-component-two.vercel.app
• The webpage was relatively easy to develop using Angular framework.
• I used Angular 11, HTML5 and SCSS (CSS Grid/Flexbox) to create the webpage.

Built With

• Angular (https://www.angular.io/)

Features

This webpage was created as a submission to a DevChallenges (https://www.devchallenges.io/challenges) challenge. The challenge (https://devchallenges.io/challenges/ohgVTyJCbm5OZyTB2gNY) was to build a webpage that satisfies the following user stories:

• User story: I can see different button types: default, outline and text
• User story: I can choose to disable box-shadow
• User story: I can choose to disable the button
• User story: I can choose to have an icon on the left or right (Use Google Icon and at least 5 variants)
• User story: I can have different button sizes
• User story: I can have different colors
• User story: When I hover or focus, I can see visual indicators
• User story: I can still access all button attributes
• User story (optional): Show button in a similar way like the design or use Storybook. Otherwise, showing the button in multiple states is enough

Contact

• Website [marvinrusinek.com] (http://www.marvinrusinek.com)
• GitHub [@marvinrusinek] (https://www.github.com/marvinrusinek)
• Twitter [@marvinrusinek] (https://www.twitter.com/marvinrusinek)