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>
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%)
}
And let's add hover effect:
.btn:hover{
outline-offset: 5px;
}
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)
🔥🔥🔥