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

Add button border animation snippet

Browse Source
This commit is contained in:
Tamás Gerényi
2018-10-30 19:43:01 +01:00
parent 57f13902cd
commit 1e3797401f
2 changed files with 221 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
index.html
View File

@ -62,6 +62,8 @@
</section> </section>
<section data-type="interactivity" class="sidebar__section"> <section data-type="interactivity" class="sidebar__section">
<h4 class="sidebar__section-heading">interactivity</h4> <h4 class="sidebar__section-heading">interactivity</h4>
<a class="sidebar__link" href="#button-border">
<img alt="New" draggable="false" class="sidebar__new" src="./src/img/new.svg"><span>Toggle switch</span></a>
<a class="sidebar__link" href="#disable-selection"><span>Disable selection</span></a> <a class="sidebar__link" href="#disable-selection"><span>Disable selection</span></a>
<a class="sidebar__link" href="#mouse-cursor-gradient-tracking"><span>Mouse cursor gradient tracking</span></a> <a class="sidebar__link" href="#mouse-cursor-gradient-tracking"><span>Mouse cursor gradient tracking</span></a>
<a class="sidebar__link" href="#popout-menu"><span>Popout menu</span></a> <a class="sidebar__link" href="#popout-menu"><span>Popout menu</span></a>
@ -302,6 +304,140 @@
<!-- tags: layout --> <!-- tags: layout -->
</div> </div>
<div class="snippet">
<img alt="New" draggable="false" class="snippet__new" src="./src/img/new.svg">
<h3 id="toggle-switch"><span>Toggle switch</span><span class="tags__tag snippet__tag" data-type="visual"><i data-feather="eye"></i>visual</span><span class="tags__tag snippet__tag" data-type="interactivity"><i data-feather="edit-2"></i>interactivity</span></h3>
<p>Creates a border animation on hover.</p>
<h4 data-type="HTML">HTML</h4><pre><code class="lang-html">&lt;button class="button"&gt;Submit&lt;/button&gt;
</code></pre>
<h4 data-type="CSS">CSS</h4><pre><code class="lang-css">@import url(https://fonts.googleapis.com/css?family=BenchNine:700);
.button {
background-color: #c47135;
border: none;
color: #ffffff;
cursor: pointer;
display: inline-block;
font-family: 'BenchNine', Arial, sans-serif;
font-size: 1em;
font-size: 22px;
line-height: 1em;
margin: 15px 40px;
outline: none;
padding: 12px 40px 10px;
position: relative;
text-transform: uppercase;
font-weight: 700;
}
.button:before,
.button:after {
border-color: transparent;
-webkit-transition: all 0.25s;
transition: all 0.25s;
border-style: solid;
border-width: 0;
content: '';
height: 24px;
position: absolute;
width: 24px;
}
.button:before {
border-color: #c47135;
border-top-width: 2px;
left: 0px;
top: -5px;
}
.button:after {
border-bottom-width: 2px;
border-color: #c47135;
bottom: -5px;
right: 0px;
}
.button:hover,
.button.hover {
background-color: #c47135;
}
.button:hover:before,
.button.hover:before,
.button:hover:after,
.button.hover:after {
height: 100%;
width: 100%;
}
</code></pre>
<h4>Demo</h4>
<div class="snippet-demo" data-scope="button-border.md">
<button class="button">Submit</button>
</div>
<style>
@import url(https://fonts.googleapis.com/css?family=BenchNine:700);
[data-scope="button-border.md"] {}
[data-scope="button-border.md"] .button {
background-color: #c47135;
border: none;
color: #ffffff;
cursor: pointer;
display: inline-block;
font-family: 'BenchNine', Arial, sans-serif;
font-size: 1em;
font-size: 22px;
line-height: 1em;
margin: 15px 40px;
outline: none;
padding: 12px 40px 10px;
position: relative;
text-transform: uppercase;
font-weight: 700;
}
[data-scope="button-border.md"] .button:before,
[data-scope="button-border.md"] .button:after {
border-color: transparent;
-webkit-transition: all 0.25s;
transition: all 0.25s;
border-style: solid;
border-width: 0;
content: '';
height: 24px;
position: absolute;
width: 24px;
}
[data-scope="button-border.md"] .button:before {
border-color: #c47135;
border-top-width: 2px;
left: 0px;
top: -5px;
}
[data-scope="button-border.md"] .button:after {
border-bottom-width: 2px;
border-color: #c47135;
bottom: -5px;
right: 0px;
}
[data-scope="button-border.md"] .button:hover,
[data-scope="button-border.md"] .button.hover {
background-color: #c47135;
}
[data-scope="button-border.md"] .button:hover:before,
[data-scope="button-border.md"] .button.hover:before,
[data-scope="button-border.md"] .button:hover:after,
[data-scope="button-border.md"] .button.hover:after {
height: 100%;
width: 100%;
}
</style>
<h4>Explanation</h4>
<p>This effect is uses before and after selectors to make the border full width on hover.</p>
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
99+%
</div>
</div>
<p><span class="snippet__support-note">✅ No caveats.</span></p>
<!-- tags: visual, interactivity -->
<!-- date: 2018-10-30 -->
</div>
<div class="snippet"> <div class="snippet">
<h3 id="calc"><span>Calc()</span><span class="tags__tag snippet__tag" data-type="other"><i data-feather="tag"></i>other</span></h3> <h3 id="calc"><span>Calc()</span><span class="tags__tag snippet__tag" data-type="other"><i data-feather="tag"></i>other</span></h3>
<p>The function calc() allows to define CSS values with the use of mathematical expressions, the value adopted for the property is the result of a mathematical expression.</p> <p>The function calc() allows to define CSS values with the use of mathematical expressions, the value adopted for the property is the result of a mathematical expression.</p>

85
snippets/button-border.md Normal file
View File

@ -0,0 +1,85 @@
### Toggle switch
Creates a border animation on hover.
#### HTML
```html
<button class="button">Submit</button>
```
#### CSS
```css
@import url(https://fonts.googleapis.com/css?family=BenchNine:700);
.button {
background-color: #c47135;
border: none;
color: #ffffff;
cursor: pointer;
display: inline-block;
font-family: 'BenchNine', Arial, sans-serif;
font-size: 1em;
font-size: 22px;
line-height: 1em;
margin: 15px 40px;
outline: none;
padding: 12px 40px 10px;
position: relative;
text-transform: uppercase;
font-weight: 700;
}
.button:before,
.button:after {
border-color: transparent;
-webkit-transition: all 0.25s;
transition: all 0.25s;
border-style: solid;
border-width: 0;
content: '';
height: 24px;
position: absolute;
width: 24px;
}
.button:before {
border-color: #c47135;
border-top-width: 2px;
left: 0px;
top: -5px;
}
.button:after {
border-bottom-width: 2px;
border-color: #c47135;
bottom: -5px;
right: 0px;
}
.button:hover,
.button.hover {
background-color: #c47135;
}
.button:hover:before,
.button.hover:before,
.button:hover:after,
.button.hover:after {
height: 100%;
width: 100%;
}
```
#### Demo
#### Explanation
This effect is uses before and after selectors to make the border full width on hover.
#### Browser support
<span class="snippet__support-note">✅ No caveats.</span>
<!-- tags: visual, interactivity -->
<!-- date: 2018-10-30 -->