DEV Community

Cover image for simple button CSS
GiandoDev
GiandoDev

Posted on

simple button CSS

I want try to cover Css from the basic this is a test.
Fun stuff will come soon 🥳😱.
First we set our html:

<button>Log In</button>
Enter fullscreen mode Exit fullscreen mode

Now let's write some css, I set first the main role for my html:

html{
 height: 100vh; /* all the screen */
 background: grey; /* the color for the background */
 box-sizing: border-box; /* we talk soon about it */
 display: flex; /* flexbox */
 align-items: center /* center the button in the middle of the wh */
 justify-content: center; /* center the button in the middle of the vw */
}
Enter fullscreen mode Exit fullscreen mode

Now I am ready to apply same simple style to our button:

button{
 padding: 1rem;
 border: 0.5rem solid rebeccapurple; 
 border-radius: 0.3rem;
 font-size: 1.5rem;
 background: rebeccapurple;
 color: white;
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)