cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <input id="pokeball" name="ball" type="radio" value="poke-ball" checked>
<input id="greatball" name="ball" type="radio" value="great-ball">
<input id="ultraball" name="ball" type="radio" value="ultra-ball">
<input id="masterball" name="ball" type="radio" value="master-ball">
<input id="loveball" name="ball" type="radio" value="love-ball">
<input id="premierball" name="ball" type="radio" value="premier-ball">
<input id="levelball" name="ball" type="radio" value="level-ball">
<input id="diveball" name="ball" type="radio" value="dive-ball">

<div class="poke-ball">
  <div class="border">
    <div class="inner"></div>
  </div>
  <div class="ball">
    <div class="extras"></div>
    <div class="moar-extras"></div>
    <div class="even-moar-extras"></div>
    <div class="and-some-moar-extras"></div>
    <div class="yikes-this-is-a-lot"></div>
    <div class="plz-kill-me-now"></div>
    <div class="oh-gawd-whyyy"></div>
  </div>
  <div class="shadow"></div>
</div>

<div class="toggle">
  <label class="active" for="pokeball">Poké Ball</label>
  <label for="greatball">Great Ball</label>
  <label for="ultraball">Ultra Ball</label>
  <label for="masterball">Master Ball</label>
  <label for="loveball">Love Ball</label>
  <label for="premierball">Premier Ball</label>
  <label for="levelball">Level Ball</label>
  <label for="diveball">Dive Ball</label>
</div>
            
          
!
            
              // Import Fonts
@import url(https://fonts.googleapis.com/css?family=Roboto:300|Hind:700|Josefin+Sans:700)

// Variables
$blue-bg: #074777
$shadow: #052F48
$white: #fff
$border: #1e1e1e

$poke-red: #912324
$great-blue: #155AC7
$ultra-yellow: #FBB61A
$ultra-gray: #444
$master-purple: #6322A9
$master-pink: #BF0498
$love-dark-pink: #F6558E
$love-light-pink: #FFA4C4
$premier-red: #E33C47
$level-yellow: #E9C025
$level-gray: #3E3838
$level-red: #C51B1B
$dive-light-blue: #7DC6FF
$dive-dark-blue: #175FB0

$pokeball-size: 300px

// Body Styles
html, body
  background: $blue-bg
  width: 100vw
  height: 100vh
  overflow: hidden
  
// Poké Ball Container
div[class*='-ball']
  --pokeball-size: $pokeball-size
  width: var(--pokeball-size)
  height: var(--pokeball-size)
  position: relative
  margin: 10vh auto
  @media (max-height: 500px)
    --pokeball-size: $pokeball-size / 1.5
    width: var(--pokeball-size)
    height: var(--pokeball-size)
  @media (max-width: 500px) and (min-width: 350px)
    --pokeball-size: $pokeball-size / 1.5
    width: var(--pokeball-size)
    height: var(--pokeball-size)
  @media (max-width: 350px)
    --pokeball-size: $pokeball-size / 1.8
    width: var(--pokeball-size)
    height: var(--pokeball-size)
    
  // Border and Inner
  .border
    width: 100%
    height: 100%
    position: absolute
    border-radius: 100%
    background: transparent
    border: calc(var(--pokeball-size) * 0.04) solid #1e1e1e
    box-shadow: inset 5px 10px 0px rgba($shadow, 0.1), inset -13px -20px 0px rgba($shadow, 0.2)
    z-index: 10
    animation-name: pokeWiggle
    animation-duration: 1.25s
    animation-fill-mode: both
    animation-iteration-count: infinite
    &:before
      content: ''
      position: absolute
      width: 100%
      height: calc(var(--pokeball-size) * 0.06)
      background: $border
      top: calc(50% - calc(var(--pokeball-size) * 0.06 / 2))
    .inner
      width: calc(var(--pokeball-size) / 3.5)
      height: calc(var(--pokeball-size) / 3.5)
      background: $white
      border-radius: 100%
      border: calc(var(--pokeball-size) * 0.04) solid $border
      position: absolute
      top: 50%
      left: 50%
      transform: translate(-50%,-50%)
      box-shadow: 2px 2px 0 2px rgba($border, 0.2)
      z-index: 10
      &:before
        content: ''
        width: calc(var(--pokeball-size) / 6)
        height: calc(var(--pokeball-size) / 6)
        background: $white
        border-radius: 100%
        border: calc(var(--pokeball-size) * 0.025) solid $border
        position: absolute
        top: 50%
        left: 50%
        transform: translate(-50%,-50%)

  // Default Ball Styles
  .ball
    width: 100%
    height: 100%
    position: relative
    border-radius: 100%
    border: calc(var(--pokeball-size) * 0.04) solid transparent
    background: linear-gradient(lighten($border, 5%) 0%, lighten($border, 5%) 50%, $white 50%, $white 100%)
    overflow: hidden
    z-index: 5
    animation-name: pokeWiggle
    animation-duration: 1.25s
    animation-fill-mode: both
    animation-iteration-count: infinite

  // Shadow to add some depth
  .shadow
    background: linear-gradient(100deg, rgba($shadow,0.75) 0%, rgba($shadow,0) 100%)
    width: calc(var(--pokeball-size) * 1.5)
    height: calc(var(--pokeball-size) / 3)
    border-radius: 100%
    position: absolute
    bottom: calc(var(--pokeball-size) / 8 * -1)
    left: calc(var(--pokeball-size) / 5)
    transform: rotate(-3deg)
    z-index: 2
    animation-name: shadowWiggle
    animation-duration: 1.25s
    animation-fill-mode: both
    animation-iteration-count: infinite

// Poké Ball
#pokeball:checked ~ .toggle label[for="pokeball"]
  background: lighten($shadow, 5%)
#pokeball:checked ~ .poke-ball
  .ball
    background: linear-gradient($poke-red 0%, $poke-red 50%, $white 50%, $white 100%)

// Great Ball
#greatball:checked ~ .toggle label[for="greatball"]
  background: lighten($shadow, 5%)
#greatball:checked ~ .poke-ball
  .ball
    background: linear-gradient($great-blue 0%, $great-blue 50%, $white 50%, $white 100%)
    &:before, &:after
      content: ''
      position: absolute
      border-top: calc(var(--pokeball-size) / 4) solid $poke-red
      border-left: calc(var(--pokeball-size) / 8 / 2) solid transparent
      border-right: calc(var(--pokeball-size) / 8 / 2) solid transparent
      width: calc(var(--pokeball-size) / 8)
      top: 5%
    &:before
      left: 10%
      transform: rotate(-50deg)
    &:after
      right: 10%
      transform: rotate(50deg)

// Ultra Ball
#ultraball:checked ~ .toggle label[for="ultraball"]
  background: lighten($shadow, 5%)
#ultraball:checked ~ .poke-ball
  .ball
    background: linear-gradient($ultra-yellow 0%, $ultra-yellow 50%, $white 50%, $white 100%)
    .extras:before
      content: ''
      position: absolute
      width: 45%
      height: 40%
      background: $ultra-gray
      left: 50%
      top: 7%
      border-radius: 4em 4em 0 0
      transform: translateX(-50%)
      z-index: -10
    &:before, &:after
      content: ''
      position: absolute
      width: var(--pokeball-size)
      height: calc((var(--pokeball-size) / 1.66) - 3%)
      bottom: calc((var(--pokeball-size) / 2) + 3%)
      border-radius: var(--pokeball-size) var(--pokeball-size) 0 0
      z-index: 5
    &:before
      box-shadow: inset 20px 0 0 $ultra-gray, inset -20px 0 0 $ultra-gray

// Master Ball
#masterball:checked ~ .toggle label[for="masterball"]
  background: lighten($shadow, 5%)
#masterball:checked ~ .poke-ball
  .ball
    background: linear-gradient($master-purple 0%, $master-purple 50%, $white 50%, $white 100%)
    &:before, &:after
      content: ''
      position: absolute
      width: calc(var(--pokeball-size) / 2.25)
      height: calc(var(--pokeball-size) / 2.25)
      background: $master-pink
      border-radius: 100%
      top: -1.25em
    &:before
      left: -2em
      transform: rotate(-50deg)
    &:after
      right: -2em
      transform: rotate(50deg)
    .extras:before
      content: 'M'
      width: 50px
      height: 50px
      position: absolute
      left: 50%
      transform: translate(-50%, 90%)
      text-align: center
      color: white
      font-family: 'Hind'
      font-weight: 700
      font-size: 2.5em

// Love Ball
#loveball:checked ~ .toggle label[for="loveball"]
  background: lighten($shadow, 5%)
#loveball:checked ~ .poke-ball
  .ball
    background: linear-gradient($love-dark-pink 0%, $love-dark-pink 50%, $white 50%, $white 100%)
    .extras
      position: fixed
      width: 55%
      height: 50%
      top: 10%
      left: 50%
      transform: translateX(-50%)
      z-index: 3
      &:before, &:after
        position: absolute
        content: ""
        left: 50%
        width: 50%
        height: 90%
        background: $love-light-pink
        border-radius: calc(var(--pokeball-size) / 6) calc(var(--pokeball-size) / 6) 0 0
        transform: rotate(-45deg)
        transform-origin: 0 100%
      &:after
        left: 0
        transform: rotate(45deg)
        transform-origin: 100% 100%
    .moar-extras
      position: fixed
      width: 55%
      height: 50%
      top: 10%
      left: 50%
      transform: translateX(-50%)
      z-index: 2
      &:before, &:after
        position: absolute
        content: ""
        left: 50%
        width: 50%
        height: 90%
        background: $love-light-pink
        border-radius: calc(var(--pokeball-size) / 6) calc(var(--pokeball-size) / 6) 0 0
        transform: rotate(-45deg)
        transform-origin: 0 100%
        box-shadow: 0px 0px 0px calc(var(--pokeball-size) * 0.03) $white
      &:after
        left: 0
        transform: rotate(45deg)
        transform-origin: 100% 100%
    .even-moar-extras:before
      content: ''
      position: absolute
      width: 7%
      height: 10%
      border-radius: 100%
      background: $white
      left: 50%
      transform: translateX(-50%)
      bottom: 70%
      z-index: 10
      
// Premier Ball
#premierball:checked ~ .toggle label[for="premierball"]
  background: lighten($shadow, 5%)
#premierball:checked ~ .poke-ball
  .border
    &:before
      background: $premier-red
    .inner
      border-color: $premier-red
      box-shadow: none
      &:before
        border-color: rgba($border, 0.7)
  .ball
    background: $white
    
// Level Ball
#levelball:checked ~ .toggle label[for="levelball"]
  background: lighten($shadow, 5%)
#levelball:checked ~ .poke-ball
  .ball
    background: linear-gradient($level-gray 0%, $level-gray 15%, $level-yellow 15%, $level-yellow 50%, $white 50%, $white 100%)
    .extras
      &:before, &:after
        content: 'V'
        font-family: 'Josefin Sans'
        font-weight: 900
        position: absolute
        text-align: center
        font-size: 4.5em
        color: $level-red
        width: 100%
        top: 6%
      &:before
        -webkit-text-fill-color: $level-red
        -webkit-text-stroke-width: calc(var(--pokeball-size) / 30)
        -webkit-text-stroke-color: $border
      &:after
        -webkit-text-fill-color: $level-red
        -webkit-text-stroke-width: calc(var(--pokeball-size) / 30 / 2)
        -webkit-text-stroke-color: $level-red
      
// Dive Ball
#diveball:checked ~ .toggle label[for="diveball"]
  background: lighten($shadow, 5%)
#diveball:checked ~ .poke-ball
  .ball
    background: linear-gradient($white 0%, $white 40%, $dive-light-blue 40%, $dive-light-blue 80%, $dive-dark-blue 80%)
    .extras
      width: 100%
      &:before
        content: ''
        position: absolute
        top: calc(50% - (var(--pokeball-size) / 3.5 / 2))
        left: calc(var(--pokeball-size) / 4 / 2 * -0.5)
        width: calc(var(--pokeball-size) / 4)
        height: calc(var(--pokeball-size) / 3.5)
        border-radius: 100%
        background: $dive-light-blue
      &:after
        content: ''
        position: absolute
        top: calc(50% - (var(--pokeball-size) / 3.5 / 2))
        right: calc(var(--pokeball-size) / 4 / 2 * -0.5)
        width: calc(var(--pokeball-size) / 4)
        height: calc(var(--pokeball-size) / 3.5)
        border-radius: 100%
        background: $dive-light-blue
    .moar-extras
      width: 100%
      &:before
        content: ''
        position: absolute
        top: calc(50% - (var(--pokeball-size) / 2 / 2))
        left: calc(50% - (var(--pokeball-size) / 2.5 / 2))
        width: calc(var(--pokeball-size) / 2.5)
        height: calc(var(--pokeball-size) / 2)
        border-radius: 100%
        background: $dive-light-blue
    .even-moar-extras
      width: 100%
      &:before, &:after
        content: ''
        position: absolute
        top: calc((var(--pokeball-size) / 4.05))
        width: calc(var(--pokeball-size) / 5.7)
        height: calc(var(--pokeball-size) / 4.5)
        border-radius: 100%
        background: $white
      &:before
        left: calc(var(--pokeball-size) / 6.8)
      &:after
        right: calc(var(--pokeball-size) / 6.8)
    .and-some-moar-extras
      width: 100%
      &:before, &:after
        content: ''
        position: absolute
        background: $dive-dark-blue
        bottom: 0
        width: calc(var(--pokeball-size) / 4.5)
        height: calc(var(--pokeball-size) / 3)
        border-radius: 100%
      &:before
        left: calc(var(--pokeball-size) / 20)
      &:after
        right: calc(var(--pokeball-size) / 20)
    .yikes-this-is-a-lot
      width: 100%
      &:before
        content: ''
        position: absolute
        background: $dive-dark-blue
        bottom: 0
        left: calc(50% - (var(--pokeball-size) / 4 / 2))
        width: calc(var(--pokeball-size) / 4)
        height: calc(var(--pokeball-size) / 2.5)
        border-radius: 100%
    .plz-kill-me-now
      width: 100%
      &:before, &:after
        content: ''
        position: absolute
        bottom: calc((var(--pokeball-size) / 7.2))
        width: calc(var(--pokeball-size) / 8.1)
        height: calc(var(--pokeball-size) / 4)
        border-radius: 100%
        background: $dive-light-blue
      &:before
        left: calc(var(--pokeball-size) / 3.87)
      &:after
        right: calc(var(--pokeball-size) / 3.87)
    .oh-gawd-whyyy
      width: 100%
      &:before
        content: ''
        position: absolute
        width: calc(var(--pokeball-size) / 9)
        height: calc(var(--pokeball-size) / 7)
        top: 5%
        left: calc(50% - (var(--pokeball-size) / 9 / 2))
        border-radius: 100%
        background: $dive-light-blue

// Hide radio buttons, used to trigger different balls
input[type="radio"]
  position: absolute
  visibility: hidden

// Toggle and Label
.toggle
  position: absolute
  left: 0
  right: 0
  bottom: 0
  background: $shadow
  display: flex
  flex-wrap: wrap
  justify-content: space-around
  text-align: center
  @media (max-width: 500px)
    font-size: 0.8em
  label
    display: block
    padding: 1em 0.5em
    color: $white
    font-size: 1.5em
    font-family: 'Roboto'
    font-weight: 300
    letter-spacing: 2px
    white-space: nowrap
    flex: 1
    display: flex
    justify-content: center
    align-items: center
    transition: background 300ms ease-in-out
    cursor: pointer
    &:hover
      background: lighten($shadow, 3%)
    input
      margin-right: 0.5em
      
// Wiggle animation
@keyframes pokeWiggle
  from
    transform: none
  20%
    transform: translate3d(-15%,0,0) rotate3d(0,0,1,-10deg)
  40%
    transform: translate3d(15%,0,0) rotate3d(0,0,1,5deg)
  60%
    transform: translate3d(-7%,0,0) rotate3d(0,0,1,-10deg)
  to
    transform: none

// Shadow Animation -- less dramatic than pokeball
@keyframes shadowWiggle
  from
    transform: rotate(-3deg)
  20%
    transform: translate3d(-2%,0,0) rotate(-3deg)
  40%
    transform: translate3d(2%,0,0) rotate(-3deg)
  60%
    transform: translate3d(-1%,0,0) rotate(-3deg)
  to
    transform: rotate(-3deg)
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console