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

Add icon border animation snippet

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

130
index.html
View File

@ -65,6 +65,8 @@
<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="#icon-border">
<img alt="New" draggable="false" class="sidebar__new" src="./src/img/new.svg"><span>Icon Border Animation</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="#sibling-fade"><span>Sibling fade</span></a>
@ -1750,6 +1752,134 @@ el.style.setProperty('--max-height', height + 'px')
<!-- tags: animation -->
</div>
<div class="snippet">
<img alt="New" draggable="false" class="snippet__new" src="./src/img/new.svg">
<h3 id="icon-border-animation"><span>Icon Border Animation</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;a href="#" class="button ion-ios-star-outline"&gt;&lt;/a&gt;
</code></pre>
<h4 data-type="CSS">CSS</h4><pre><code class="lang-css">@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
.button {
position: relative;
overflow: hidden;
font-size: 40px;
color: rgba(255, 255, 255, 0.8);
margin: 40px;
padding: 3px;
display: inline-block;
text-align: center;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
text-decoration: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.button::before {
background-color: #2b2b2b;
width: 75px;
height: 75px;
line-height: 75px;
}
.button:after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #f39c12;
content: '';
z-index: -1;
display: inline-block;
-webkit-transform: rotate(-45deg) scale(1.5) translate(0%, -100%);
transform: rotate(-45deg) scale(1.5) translate(0%, -100%);
}
.button:before,
.button:after {
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.button:hover,
.button:active,
.button.hover {
color: #ffffff;
}
.button:hover:after,
.button:active:after,
.button.hover:after {
-webkit-transform: rotate(-45deg) scale(1.5) translate(0%, 0%);
transform: rotate(-45deg) scale(1.5) translate(0%, 0%);
}
</code></pre>
<h4>Demo</h4>
<div class="snippet-demo" data-scope="icon-border.md">
<a href="#" class="button ion-ios-star-outline"></a>
</div>
<style>
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
[data-scope="icon-border.md"] {}
[data-scope="icon-border.md"] .button {
position: relative;
overflow: hidden;
font-size: 40px;
color: rgba(255, 255, 255, 0.8);
margin: 40px;
padding: 3px;
display: inline-block;
text-align: center;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
text-decoration: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
[data-scope="icon-border.md"] .button::before {
background-color: #2b2b2b;
width: 75px;
height: 75px;
line-height: 75px;
}
[data-scope="icon-border.md"] .button:after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #f39c12;
content: '';
z-index: -1;
display: inline-block;
-webkit-transform: rotate(-45deg) scale(1.5) translate(0%, -100%);
transform: rotate(-45deg) scale(1.5) translate(0%, -100%);
}
[data-scope="icon-border.md"] .button:before,
[data-scope="icon-border.md"] .button:after {
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
[data-scope="icon-border.md"] .button:hover,
[data-scope="icon-border.md"] .button:active,
[data-scope="icon-border.md"] .button.hover {
color: #ffffff;
}
[data-scope="icon-border.md"] .button:hover:after,
[data-scope="icon-border.md"] .button:active:after,
[data-scope="icon-border.md"] .button.hover:after {
-webkit-transform: rotate(-45deg) scale(1.5) translate(0%, 0%);
transform: rotate(-45deg) scale(1.5) translate(0%, 0%);
}
</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">
<img alt="New" draggable="false" class="snippet__new" src="./src/img/new.svg">
<h3 id="last-item-with-remaining-available-height"><span>Last item with remaining available height</span><span class="tags__tag snippet__tag" data-type="layout"><i data-feather="layout"></i>layout</span></h3>

77
snippets/icon-border.md Normal file
View File

@ -0,0 +1,77 @@
### Icon Border Animation
Creates a border animation on hover.
#### HTML
```html
<a href="#" class="button ion-ios-star-outline"></a>
```
#### CSS
```css
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
.button {
position: relative;
overflow: hidden;
font-size: 40px;
color: rgba(255, 255, 255, 0.8);
margin: 40px;
padding: 3px;
display: inline-block;
text-align: center;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
text-decoration: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.button::before {
background-color: #2b2b2b;
width: 75px;
height: 75px;
line-height: 75px;
}
.button:after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #f39c12;
content: '';
z-index: -1;
display: inline-block;
-webkit-transform: rotate(-45deg) scale(1.5) translate(0%, -100%);
transform: rotate(-45deg) scale(1.5) translate(0%, -100%);
}
.button:before,
.button:after {
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.button:hover,
.button:active,
.button.hover {
color: #ffffff;
}
.button:hover:after,
.button:active:after,
.button.hover:after {
-webkit-transform: rotate(-45deg) scale(1.5) translate(0%, 0%);
transform: rotate(-45deg) scale(1.5) translate(0%, 0%);
}
```
#### 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 -->