DEV Community

Cover image for simple button CSS
GiandoDev
GiandoDev

Posted on

2

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

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay