Have not published an article for a long time, recently in the personal blog, if you think the article is written well can pay attention to my blog Lin Zhiwei blog (dog head to save life)

show

preface

Button effects use pseudo-class labels to achieve the effect before/after. Here are some steps to show

1. Create the button. The common button used by bloggers is written from div

The < div > button < / div >Copy the code

2. The basic CSS style of the corresponding button is finished first, which is shown here with less

div{ position: relative; cursor: pointer; // Add gesture to move to block display: flex; // Use Flex to center text align-items: center; justify-content: center; transition: all .2s; Background: linear gradient(left, # FFFFFF,#333333)Copy the code

3. When the base section is complete, add the pseudo class tag to the div

Div {// Step 2 has set the relative positioning &:before{content: "; The pseudo-class label must be set to content otherwise it will have no effect position: Absolute; left: -100%; top: -100%; width: 100%; Height: 100%; Background: rgba (255255255, 2); } &:after{ content: ''; The pseudo-class label must be set to content otherwise it will have no effect position: Absolute; right: -100%; bottom: -100%; width: 100%; Height: 100%; Background: rgba (255255255, 2); }}Copy the code

4. The last step is to hover the div

div{ &:hover{ &:before{ top: 0; left: 0; } &:after{ button: 0; right: 0; }}}Copy the code

The above is a button simple effects to achieve, you can also try, creation is not easy, thank you for watching