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 blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

AWS GenAI LIVE!

GenAI LIVE! is a dynamic live-streamed show exploring how AWS and our partners are helping organizations unlock real value with generative AI.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️