Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /* ---------- HTML ---------- */
- <a href="javascript:void(0);" class="btn-effect to-right" target="_blank"><span>Show More</span></a>
- <a href="javascript:void(0);" class="btn-effect to-left" target="_blank"><span>Show More</span></a>
- <a href="javascript:void(0);" class="btn-effect to-bottom" target="_blank"><span>Show More</span></a>
- <a href="javascript:void(0);" class="btn-effect to-top" target="_blank"><span>Show More</span></a>
- /* ---------- CSS ---------- */
- .btn-effect {
- position: relative;
- display: inline-block;
- font-size: 16px;
- font-weight: 400;
- text-transform: uppercase;
- height: 60px;
- line-height: 60px;
- min-width: 1px;
- padding: 0 20px;
- color: #fff;
- border: 1px solid #000;
- background: #ccc;
- .transition();
- overflow: hidden;
- &::after {
- content: '';
- display: block;
- position: absolute;
- top: 0;
- bottom: 0;
- background: #000;
- .transition();
- }
- span {
- position: relative;
- z-index: 1;
- }
- &:hover {
- background: #ccc;
- }
- &.to-right {
- &::after {
- width: 0;
- left: auto;
- right: 0;
- transform-origin: right center;
- }
- &:hover {
- &::after {
- left: 0;
- right: auto;
- width: 100%;
- transform-origin: left center;
- }
- }
- }
- &.to-left {
- &::after {
- width: 0;
- right: auto;
- left: 0;
- transform-origin: left center;
- }
- &:hover {
- &::after {
- right: 0;
- left: auto;
- width: 100%;
- transform-origin: right center;
- }
- }
- }
- &.to-bottom {
- &::after {
- height: 0;
- left: 0;
- right: 0;
- top: auto;
- bottom: 0;
- transform-origin: bottom center;
- }
- &:hover {
- &::after {
- height: 100%;
- top: 0;
- bottom: auto;
- transform-origin: top center;
- }
- }
- }
- &.to-top {
- &::after {
- height: 0;
- left: 0;
- right: 0;
- top: 0;
- bottom: auto;
- transform-origin: top center;
- }
- &:hover {
- &::after {
- height: 100%;
- top: auto;
- bottom: 0;
- transform-origin: bottom center;
- }
- }
- }
- }
Add Comment
Please, Sign In to add comment