Posts

Showing posts with the label CSS

How to make cool buttons with CSS

Image
Cool CSS buttons Hey there, always wondered how to make cool CSS buttons with beautiful animations? well, I have got just the tutorial for you. Most animated CSS buttons are made using pseudo-elements ( ::before  and  ::after ). The  ::before  pseudo-element can be used to insert some content before the content of an element.  The  ::after  pseudo-element can be used to insert some content after the content of an element. Let's start by making this simple animation using pseudo-elements In this example, we can simply design the button how we normally would and add the pseudo-element for the hover state to give that cool animation. We'll start with the basic HTML: <button class="btn">Hover</button> Now add the basic css for the button: .btn{ color: #4895ef; font-size: 1rem; cursor: pointer; transition: 0.2s; position: relative; overflow: hidden; padd...