6 hand-painted graffiti buttons Based on CSS3-

This is an interesting set of cartoon buttons in the pure CSS3 hand-drawn style. This set of hand-drawn style buttons have 6 different effects. They are made up of hand-painted graffiti, with different button border line width and dotted line. The effect is very good. Brief tutorial

This is an interesting and pure group.CSS3 hand-drawnStyle cartoon button design effect. This set of hand-drawn style buttons have 6 different effects.Hand-painted graffitiWith different button border line width and dotted line to form a button, the effect is very good.

Usage

　HTML Structure

The HTML structure of the hand-drawn cartoon button is to use a button.Elements, with different class classes to implement different hand-drawn style buttons.

Lined Thick Dotted Thick Dashed Thick

CSS style

In this DEMO, the entire page is laid out using flexbox. The page font uses a hand-drawn Google font.

@import url(https://fonts.googleapis.com/css?family=Patrick+Hand+SC);html, body {  width: 100%;  min-height: 100%;  margin: 0;  display: -webkit-box;  display: -webkit-flex;  display: -ms-flexbox;  display: flex;  -webkit-box-orient: vertical;  -webkit-box-direction: normal;  -webkit-flex-direction: column;      -ms-flex-direction: column;          flex-direction: column;  -webkit-box-pack: center;  -webkit-justify-content: center;      -ms-flex-pack: center;          justify-content: center;  background: #F0F0D8;  font-family: 'Patrick Hand SC', cursive;}html section, body section {  display: -webkit-box;  display: -webkit-flex;  display: -ms-flexbox;  display: flex;  -webkit-box-orient: horizontal;  -webkit-box-direction: normal;  -webkit-flex-direction: row;      -ms-flex-direction: row;          flex-direction: row;  -webkit-box-pack: center;  -webkit-justify-content: center;      -ms-flex-pack: center;          justify-content: center;  width: 100%;  min-height: 100%;  margin-bottom: 3rem;}

The background color of all buttons is transparent. You can use padding to set the button size and set some shadow and rounded corner effects for the button. You can also specify a 0.5 second transition animation for the button.

html section button, body section button {  -webkit-align-self: center;      -ms-flex-item-align: center;          align-self: center;  background: transparent;  padding: 1rem 1rem;  margin: 0 1rem;  -webkit-transition: all .5s ease;  transition: all .5s ease;  color: #41403E;  font-size: 2rem;  letter-spacing: 1px;  outline: none;  box-shadow: 20px 38px 34px -26px rgba(0, 0, 0, 0.2);  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;}

The above rounded corner settings are equivalent to the following code:

border-top-left-radius: 255px 15px;border-top-right-radius: 15px 225px;border-bottom-right-radius: 225px 15px;border-bottom-left-radius:15px 255px;

Then, specify the border styles for the six hand-drawn styles respectively.

html section button.lined.thick, body section button.lined.thick {  border: solid 7px #41403E;}html section button.dotted.thick, body section button.dotted.thick {  border: dotted 5px #41403E;}html section button.dashed.thick, body section button.dashed.thick {  border: dashed 5px #41403E;}html section button.lined.thin, body section button.lined.thin {  border: solid 2px #41403E;}html section button.dotted.thin, body section button.dotted.thin {  border: dotted 2px #41403E;}html section button.dashed.thin, body section button.dashed.thin {  border: dashed 2px #41403E;}

When you move the mouse over the button, modify the shadow effect of the button.

html section button:hover, body section button:hover {  box-shadow: 2px 8px 4px -6px rgba(0, 0, 0, 0.3);}

Finally, we use media queries to make la s on small screens.

@media (max-width: 620px) {  body h1 {    margin-top: 2rem;  }  body section {    display: -webkit-box;    display: -webkit-flex;    display: -ms-flexbox;    display: flex;    -webkit-box-orient: vertical;    -webkit-box-direction: normal;    -webkit-flex-direction: column;        -ms-flex-direction: column;            flex-direction: column;    -webkit-box-pack: center;    -webkit-justify-content: center;        -ms-flex-pack: center;            justify-content: center;    margin-bottom: 1rem;  }  body section button {    -webkit-align-self: center;        -ms-flex-item-align: center;            align-self: center;    margin-bottom: 2rem;  }}

The above content is based on 6 hand-painted graffiti button effects of pure CSS3. For more information, see PHP Chinese Network (www.php1.cn )!

Related Articles:

How to Use html5 and css3 to complete google graffiti Animation

You can use javascript html5 canvas to adjust the color, width, and rubber of paint brushes.

Example code of Html5 simple implementation of graffiti