분류 css

Button Hover Effects

컨텐츠 정보

  • 조회 455 (작성일 )

본문

https://codepen.io/aaroniker/pen/bGGVMbY 


HTML : 


<a href="" class="button">Button</a>

<a href="" class="button reverse dark">Reverse</a>

<a href="" class="button fast white">Fast</a>


<!-- dribbble -->

<a class="dribbble" href="https://dribbble.com/shots/7441241-Button-Hover-Effects" target="_blank"><img src="https://cdn.dribbble.com/assets/dribbble-ball-mark-2bd45f09c2fb58dbbfb44766d5d1d07c5a12972d602ef8b32204d28fa3dda554.svg" alt=""></a>


CSS : 


.button.dark {

  --background: #2F3545;

  --shadow: 0 2px 8px -1px rgba(21, 25, 36, 0.32);

  --shadow-hover: 0 4px 20px -2px rgba(21, 25, 36, 0.5);

}

.button.white {

  --background: #fff;

  --text: #275efe;

  --shadow: 0 2px 8px -1px rgba(18, 22, 33, 0.04);

  --shadow-hover: 0 4px 20px -2px rgba(18, 22, 33, 0.12);

}

.button.fast {

  --duration: .32s;

}


.button {

  --background: #275efe;

  --text: #fff;

  --font-size: 16px;

  --duration: .44s;

  --move-hover: -4px;

  --shadow: 0 2px 8px -1px rgba(39, 94, 254, 0.32);

  --shadow-hover: 0 4px 20px -2px rgba(39, 94, 254, 0.5);

  --font-shadow: var(--font-size);

  padding: 16px 32px;

  font-family: 'Roboto';

  font-weight: 500;

  line-height: var(--font-size);

  border-radius: 24px;

  display: block;

  outline: none;

  text-decoration: none;

  font-size: var(--font-size);

  letter-spacing: .5px;

  background: var(--background);

  color: var(--text);

  box-shadow: var(--shadow);

  -webkit-transform: translateY(var(--y));

          transform: translateY(var(--y));

  transition: box-shadow var(--duration) ease, -webkit-transform var(--duration) ease;

  transition: transform var(--duration) ease, box-shadow var(--duration) ease;

  transition: transform var(--duration) ease, box-shadow var(--duration) ease, -webkit-transform var(--duration) ease;

}

.button span {

  display: flex;

  overflow: hidden;

  text-shadow: 0 var(--font-shadow) 0 var(--text);

}

.button span i {

  display: block;

  -webkit-backface-visibility: hidden;

          backface-visibility: hidden;

  font-style: normal;

  transition: -webkit-transform var(--duration) ease;

  transition: transform var(--duration) ease;

  transition: transform var(--duration) ease, -webkit-transform var(--duration) ease;

  -webkit-transform: translateY(var(--m));

          transform: translateY(var(--m));

}

.button span i:nth-child(1) {

  transition-delay: 0.05s;

}

.button span i:nth-child(2) {

  transition-delay: 0.1s;

}

.button span i:nth-child(3) {

  transition-delay: 0.15s;

}

.button span i:nth-child(4) {

  transition-delay: 0.2s;

}

.button span i:nth-child(5) {

  transition-delay: 0.25s;

}

.button span i:nth-child(6) {

  transition-delay: 0.3s;

}

.button span i:nth-child(7) {

  transition-delay: 0.35s;

}

.button span i:nth-child(8) {

  transition-delay: 0.4s;

}

.button span i:nth-child(9) {

  transition-delay: 0.45s;

}

.button span i:nth-child(10) {

  transition-delay: 0.5s;

}

.button span i:nth-child(11) {

  transition-delay: 0.55s;

}

.button:hover {

  --y: var(--move-hover);

  --shadow: var(--shadow-hover);

}

.button:hover i {

  --m: calc(var(--font-size) * -1);

}

.button.reverse {

  --font-shadow: calc(var(--font-size) * -1);

}

.button.reverse:hover i {

  --m: calc(var(--font-size));

}


html {

  box-sizing: border-box;

  -webkit-font-smoothing: antialiased;

}


* {

  box-sizing: inherit;

}

*:before, *:after {

  box-sizing: inherit;

}


body {

  min-height: 100vh;

  display: flex;

  font-family: 'Roboto', Arial;

  justify-content: center;

  align-items: center;

  background: #E4ECFA;

}

body .button {

  margin: 0 12px;

}

body .dribbble {

  position: fixed;

  display: block;

  right: 20px;

  bottom: 20px;

}

body .dribbble img {

  display: block;

  height: 28px;

}




Javascript : 


$('.button').html((i, html) => {

    return '<span><i>' + $.trim(html).split('').join('</i><i>') + '</i></span>';

});