Cara Membuat Tombol Hover Menarik

Dalam artikel kal ini saya ingin membagikan tutorial yang sangat berguna untuk membuat website anda menjadi lebih bagus. yaitu cara membuat tombol hover menjadi lebih menarik. Di luar sana juga tentunya pasti sudah ada tutorial tutorial yang lainnya dan tentunya juga dapat kalian pelajari untuk membuat website anda lebih menarik. Namun tidak ada salahnya juga saya membagikan tutorial ini dan siapa tau berguna bagi pembaca blog egan...heheheheh.

Baca Juga : Membuat Tombol Loading Dengan Bootstrap dan Font Awesome
Cara Membuat Button Upload Gambar Langsung Codeigniter

Ok, langsung saja kita mulai tutorialnya. Dalam script dibawah ini saya sudah berikan script untuk membuat tombol ketika di hover menjadi lebih menarik. Contoh script di bawah menurut saya sangat simple jadi ga perlu saya jelaskan satu satu ya, jadi silahkan bisa di copy gan...hehhehehe

<html>
<head>
 <!-- CSS untuk bootstrap -->
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

 <!-- CSS untuk font awesome -->
 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

 <style type="text/css">
  .container {
   text-align: center;
   padding-top: 100px;
  }

  button:focus {
    outline: none;
  }

  .theme_btn {
    font-size: 14px;
    line-height: 30px;
    text-transform: uppercase;
    color: #fff !important;
    font-weight: 600;
    background: #ff1c1c;
    padding: 5px 30px;
  }

  .theme_btn:hover {
    color: #fff;
  }

  .button_hover {
    border-radius: 0px;
    position: relative;
    z-index: 1;
    -webkit-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
    overflow: hidden;
    border: 0px;
    display: inline-block;
    text-align: center;
  }

  .button_hover:before {
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
    z-index: -1;
    background: #e51b1b;
    -webkit-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
    opacity: 0;
  }

  .button_hover:hover {
    color: #fff !important;
  }

  .button_hover:hover:before {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
 </style>
</head>
<body>
 
 <div class="container">
  <a href="#" class="btn theme_btn button_hover">Hover Me</a>
 </div>

 <!-- js untuk jquery -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 <!-- js untuk bootstrap -->
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>