DEV Community

Cover image for Can you make creative button? With using HTML and CSS?
Nurjalol
Nurjalol

Posted on

Can you make creative button? With using HTML and CSS?

Hello there!
I'm Jalol and I want to teach you how to make a creative button with using HTML&CSS!

First lets create a:

<a href="#" class="btn">Creative Button</a>
Enter fullscreen mode Exit fullscreen mode

And add some styles:

.btn{
  font-size: 30px;
  font-family: sans-serif;
  background: #fca311;
  text-decoration: none;
  color: #fff;
  padding: 20px 30px;
  border-radius: 10px;
  outline: 3px solid #fca311;
  transition: .2s;
  outline-offset: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}
Enter fullscreen mode Exit fullscreen mode

And let's add hover effect:

.btn:hover{
  outline-offset: 5px;
}
Enter fullscreen mode Exit fullscreen mode

And done!
If you want to see preview site here's codepen link: https://codepen.io/nurjalol/pen/MWBJrpN

Hope it's helpful! 👨‍💻
Stay with me! 😁

Top comments (1)

Collapse
 
jalol_dev profile image
Nurjalol

🔥🔥🔥