0

Hello,

I am trying to style click button further. Is it possible?

Here is my current button:

http://www.innovation.web.id/One/One/portfolio-filter.php

red plain color.

I would like to put orange border with transparent background.

portfolio-filter.php

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Portfolio</title>

<link rel="stylesheet" type="text/css" href="css/style.css">

<style>

.btn {

     width: 100px;
     background-color: red;
     color: white;  

     }


#box {

      padding: 10px;

     }

.yellow, .grey, .red, .classy {

      padding: 8px;

     }

</style>
</head>


<body>

<?php include('nav.php'); ?>

<br><br><br>

<center><h2><b>Our Portfolio</b></h2></center>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
</p>

<div id="filters" class="button-group">
  <button class="btn" data-filter="*">All</button>
  <button class="btn" data-filter=".yellow">Yellow</button>
  <button class="btn" data-filter=".red">Red</button>
  <button class="btn" data-filter=".grey">Grey</button>
  <button class="btn" data-filter=".classy">Classy</button>
</div>

<br><br>
<div id="box">
  <div class="grey" data-category="transition" data-name="classy6">
    <img class="name" src="Images/Portfolio/portfolio1.jpg" width="270px">    
  </div>
  <div class="red" data-category="metalloid" data-name="classy5">
    <img class="name" src="Images/Portfolio/portfolio2.jpg" width="270px">   
  </div>
  <div class="yellow" data-category="metalloid2" data-name="classy4">
    <img class="name" src="Images/Portfolio/portfolio3.jpg" width="270px">   
  </div>
  <div class="classy" data-category="metalloid3" data-name="classy3">    
    <img class="name" src="Images/Portfolio/portfolio4.jpg" width="270px">
  </div>   

  <div class="yellow" data-category="metalloid4" data-name="classy2">
    <img class="name" src="Images/Portfolio/portfolio5.jpg" width="270px">   
  </div>
  <div class="grey" data-category="metalloid5" data-name="classy1">  
    <img class="name" src="Images/Portfolio/portfolio6.jpg" width="270px">
  </div>   
</div> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.min.js"></script>
<script>
$(function(){
  /*var $grid = $grid.isotope({*/
  var $container = $('#box').isotope({ 
    getSortData: {
      name: '[data-name]',
      symbol: '.symbol',
      number: '.number parseInt',
      category: '[data-category]',
      weight: function( itemElem ) {
        var weight = $( itemElem ).find('.weight').text();
        return parseFloat( weight.replace( /[\(\)]/g, '') );
      }
    }
  });
  // sort items on button click
  $('#sorts').on( 'click', 'button', function() {
    var sortByValue = $(this).attr('data-sort-by');
    $container.isotope({ sortBy: sortByValue });
  });
});
</script>

<!-- filter -->

<script>

// init Isotope
var $container = $('#box').isotope({
  // options
});
// filter items on button click
$('#filters').on( 'click', 'button', function() {
  var filterValue = $(this).attr('data-filter');
  $container.isotope({ filter: filterValue });
});

</script>

<script>

$container.isotope({ filter: '.yellow' });
$container.isotope({ filter: '.red' });
$container.isotope({ filter: '.grey' });
$container.isotope({ filter: '.classy' });
$container.isotope({ filter: '*' });

</script>

<!-- end filter -->

<br><br><br><br>
<img src="Images/Portfolio/clients.jpg">
<br><br><br><br>


<div align="center">
Lorem ipsum dolor sit amet, consectetuer adipiscing <br>elit, sed diam nonummy nibh euismod <br>tincidunt ut laoreet dolore magna aliquam<br> erat volutpat.<br>
<b>dolore magna aliquam</b><br><br>
</div>



<?php include('footer.php'); ?>



</body>
</html> 
2
Contributors
1
Reply
15
Views
2 Years
Discussion Span
Last Post by janetriever
0

You should apply the .btn class a border: 1px solid orange and background-color: transparent

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.