andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Travis build: 151 [cron]

Browse Source
This commit is contained in:
30secondsofcode
2019-01-21 21:21:32 +00:00
parent c1733d14cc
commit 4e554e5d56
2 changed files with 13 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docs/index.html
View File

File diff suppressed because one or more lines are too long

20
index.html
View File

@ -38,7 +38,7 @@
</section>
<section data-type="animation" class="sidebar__section">
<h4 class="sidebar__section-heading">animation</h4>
<a class="sidebar__link" href="#bouncing-loader"><span>Bouncing loader</span></a><a class="sidebar__link" href="#button-border"><span>Button border animation</span></a><a class="sidebar__link" href="#donut-spinner"><span>Donut spinner</span></a><a class="sidebar__link" href="#easing-variables"><span>Easing variables</span></a><a class="sidebar__link" href="#height-transition"><span>Height transition</span></a><a class="sidebar__link" href="#hover-shadow-box-animation"><span>Hover Shadow Box Animation</span></a><a class="sidebar__link" href="#hover-underline-animation"><span>Hover underline animation</span></a>
<a class="sidebar__link" href="#bouncing-loader"><span>Bouncing loader</span></a><a class="sidebar__link" href="#button-border-animation"><span>Button border animation</span></a><a class="sidebar__link" href="#donut-spinner"><span>Donut spinner</span></a><a class="sidebar__link" href="#easing-variables"><span>Easing variables</span></a><a class="sidebar__link" href="#height-transition"><span>Height transition</span></a><a class="sidebar__link" href="#hover-shadow-box-animation"><span>Hover Shadow Box Animation</span></a><a class="sidebar__link" href="#hover-underline-animation"><span>Hover underline animation</span></a>
</section>
<section data-type="interactivity" class="sidebar__section">
<h4 class="sidebar__section-heading">interactivity</h4>
@ -281,36 +281,36 @@
}
</code></pre>
<h4>Demo</h4>
<div class="snippet-demo" data-scope="button-border.md">
<div class="snippet-demo" data-scope="button-border-animation.md">
<div class="button-border"><button class="button">Submit</button></div>
</div>
<style>[data-scope="button-border.md"] .button {
<style>[data-scope="button-border-animation.md"] .button {
background-color: #c47135;
border: none;
color: #ffffff;
outline: none;
padding: 12px 40px 10px;
position: relative; }
[data-scope="button-border.md"] .button:before,
[data-scope="button-border.md"] .button:after {
[data-scope="button-border-animation.md"] .button:before,
[data-scope="button-border-animation.md"] .button:after {
border: 0 solid transparent;
transition: all 0.25s;
content: '';
height: 24px;
position: absolute;
width: 24px; }
[data-scope="button-border.md"] .button:before {
[data-scope="button-border-animation.md"] .button:before {
border-top: 2px solid #c47135;
left: 0px;
top: -5px; }
[data-scope="button-border.md"] .button:after {
[data-scope="button-border-animation.md"] .button:after {
border-bottom: 2px solid #c47135;
bottom: -5px;
right: 0px; }
[data-scope="button-border.md"] .button:hover {
[data-scope="button-border-animation.md"] .button:hover {
background-color: #c47135; }
[data-scope="button-border.md"] .button:hover:before,
[data-scope="button-border.md"] .button:hover:after {
[data-scope="button-border-animation.md"] .button:hover:before,
[data-scope="button-border-animation.md"] .button:hover:after {
height: 100%;
width: 100%; }
</style>