Load danh sách sản phẩm từ MySQL với hiệu ứng CSS3


Khi các bạn xây dựng một website bán hàng trực tuyến chẳng hạn, phần nội dung trang chủ của các bạn phải thể hiện được danh sách các sản phẩm.

  • Trong danh sách này, về mặt hình thức, các bạn có thể bố trí các sản phẩm sắp xếp theo dạng bảng, sử dụng các định dạng CSS để trông đẹp mắt.
  • Tiếp đến là phần nội dung, các bạn sử dụng ngôn ngữ để load trực tiếp dữ liệu từ cơ sở dữ liệu MySQL.

Vì thế, ở ví dụ này, chúng ta sẽ xây dựng một trang chủ đơn giản với dữ liệu động load từ cơ sở dữ liệu, kết hợp với CSS3 tạo giao diện thân thiện người dùng.

Giao diện sẽ xây dựng:

trangchu

Trước khi thực hiện, yêu cầu:

  • Cài đặt chương trình Xampp để sử dụng ngôn ngữ PHP và MySQL.
  • Tạo một thư mục gốc danhsachsanpham với các thành phần sau:

thumucgoc

Trong thư mục images, copy 4 hình sản phẩm và đặt tên lần lượt là: 1.png, 2.png, 3.png, 4.png.

Khi mọi thứ sẵn sàng, các bạn làm theo các bước sau:

Bước 1: Vào phpmyadmin, tạo cơ sở dữ liệu tên là quanlybanhang với cấu trúc bảng sanpham như sau:

csdl

Sau đó, chèn 4 sản phẩm vào bảng:

dulieu

Bước 2: Tạo các file css để định dạng danh sách và hiển thị hiệu ứng:

  • demo.css

@import url('reset.css');
/* General Demo Style */
body{
 background:#f9f9f9 url(../images/white_texture.jpg) repeat top left;
 color: #333;
 font-family: 'Oswald', Arial, sans-serif;
 font-size: 13px;
}
.container{
 position:relative;
}
a{
 color: #fff;
 text-decoration: none;
}
.clr{
 clear: both;
}
.main{
 position:relative;
 width:680px;
 margin: 0 auto;
}
h1{
 margin:0px;
 padding:20px 20px 10px 20px;
 font-size:34px;
 color:#333;
 text-shadow:1px 1px 1px #fff;
 text-align:left;
 font-weight:400;
 text-align:center;
}
h1 span{
 display:block;
 font-size: 14px;
 font-family: Georgia, serif;
 font-style: italic;
 color:#b2891b;
 padding-top:10px;
}
/* Header Style */
.header{
 font-family:'Arial Narrow', Arial, sans-serif;
 line-height: 24px;
 font-size: 11px;
 background: #000;
 opacity: 0.9;
 text-transform: uppercase;
 z-index: 9999;
 position: relative;
 -moz-box-shadow: 1px 0px 2px #000;
 -webkit-box-shadow: 1px 0px 2px #000;
 box-shadow: 1px 0px 2px #000;
}
.header a{
 padding: 0px 10px;
 letter-spacing: 1px;
 color: #ddd;
 display: block;
 float: left;
}
.header a:hover{
 color: #fff;
}
.header span.right{
 float: right;
}
.header span.right a{
 float: none;
 display: inline;
}

.more{
 position:relative;
 clear:both;
 font-family:'Arial Narrow', Arial, sans-serif;
 text-transform: uppercase;
 font-size: 11px;
 padding: 5px 0px 10px;
 width: 540px;
 margin: 0 auto;
}
.more ul{
 display:block;
 text-align:center;
 height: 30px;
}
.more ul li{
 display: block;
 padding: 4px 2px;
 float:left;
}
.more ul li.selected a,
.more ul li.selected a:hover{
 background:#b2891b;
 color:#fff;
 text-shadow:none;
}
.more ul li a{
 color:#555;
 float:left;
 background:#fff;
 width:40px;
 padding: 2px 5px;
 -moz-box-shadow:1px 1px 2px #aaa;
 -webkit-box-shadow:1px 1px 2px #aaa;
 box-shadow:1px 1px 2px #aaa;
}
.more ul li a:hover{
 background:#000;
 color:#fff;
}
  • style_common.css:
.view {
   width: 300px;
   height: 200px;
   margin: 10px;
   float: left;
   border: 10px solid #fff;
   overflow: hidden;
   position: relative;
   text-align: center;
   -webkit-box-shadow: 1px 1px 2px #e6e6e6;
   -moz-box-shadow: 1px 1px 2px #e6e6e6;
   box-shadow: 1px 1px 2px #e6e6e6;
   cursor: default;
   background: #fff url(../images/bgimg.jpg) no-repeat center center;
}
.view .mask,.view .content {
   width: 300px;
   height: 200px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.view img {
   display: block;
   position: relative;
}
.view h2 {
   text-transform: uppercase;
   color: #fff;
   text-align: center;
   position: relative;
   font-size: 17px;
   padding: 10px;
   background: rgba(0, 0, 0, 0.8);
   margin: 20px 0 0 0;
}
.view p {
   font-family: Georgia, serif;
   font-style: italic;
   font-size: 12px;
   position: relative;
   color: #fff;
   padding: 10px 20px 20px;
   text-align: center;
}
.view a.info {
   display: inline-block;
   text-decoration: none;
   padding: 7px 14px;
   background: #000;
   color: #fff;
   text-transform: uppercase;
   -webkit-box-shadow: 0 0 1px #000;
   -moz-box-shadow: 0 0 1px #000;
   box-shadow: 0 0 1px #000;
}
.view a.info: hover {
   -webkit-box-shadow: 0 0 5px #000;
   -moz-box-shadow: 0 0 5px #000;
   box-shadow: 0 0 5px #000;
}
  • style1.css
.view-first img {
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.view-first .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   background-color: rgba(219,127,8, 0.7);
   -webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
   -ms-transition: all 0.4s ease-in-out;
   transition: all 0.4s ease-in-out;
}
.view-first h2 {
   -webkit-transform: translateY(-100px);
   -moz-transform: translateY(-100px);
   -o-transform: translateY(-100px);
   -ms-transform: translateY(-100px);
   transform: translateY(-100px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-first p {
   -webkit-transform: translateY(100px);
   -moz-transform: translateY(100px);
   -o-transform: translateY(100px);
   -ms-transform: translateY(100px);
   transform: translateY(100px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.view-first:hover img {
   -webkit-transform: scale(1.1,1.1);
   -moz-transform: scale(1.1,1.1);
   -o-transform: scale(1.1,1.1);
   -ms-transform: scale(1.1,1.1);
   transform: scale(1.1,1.1);
}
.view-first a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-first:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
}
.view-first:hover p {
   -webkit-transition-delay: 0.1s;
   -moz-transition-delay: 0.1s;
   -o-transition-delay: 0.1s;
   -ms-transition-delay: 0.1s;
   transition-delay: 0.1s;
}
.view-first:hover a.info {
   -webkit-transition-delay: 0.2s;
   -moz-transition-delay: 0.2s;
   -o-transition-delay: 0.2s;
   -ms-transition-delay: 0.2s;
   transition-delay: 0.2s;
}
				

Bước 3: Tạo file kết nối với cơ sở dữ liệu

  • dbconnect.php
<!--?php $connect = mysql_connect("localhost", "root", "") or die("Không kết nối được với MYSQL"); mysql_select_db("quanlybanhang", $connect) or die ("Không tìm thấy cơ sở dữ liệu"); mysql_query("SET NAMES utf8"); ?-->

Bước 4: Tạo trang index

<!DOCTYPE html>
<html>
 <head>
 <title>Danh sách sản phẩm</title>
 <meta charset="UTF-8" />
 
 <link rel="stylesheet" type="text/css" href="css/demo.css" />
 <link rel="stylesheet" type="text/css" href="css/style_common.css" />
 <link rel="stylesheet" type="text/css" href="css/style1.css" />
 </head>
 <body>

<div class="container"> 

<div class="main">
 <?php include ("dbconnect.php"); $rs = mysql_query("select * from sanpham"); while($row = mysql_fetch_array($rs)){ ?>

<div class="view view-first">
 <img src="images/<?php echo $row['hinhanh']; ?>" />

<div class="mask">

<h2><?php echo $row['tensanpham']; ?></h2>



<?php echo $row['mota']; ?>

 <a href="#" class="info">MUA HÀNG</a>
 </div>

 </div>

 
 <?php } ?> 
 </div>

 </div>

 </body>
</html>

Chúc các bạn thành công.

Responsive web design (RWD) – Thiết kế giao diện web thích ứng với kích thước màn hình thiết bị


Trước đây để có thể hiển thị nội dung website của mình trên các thiết bị di động thi giải pháp được sử dụng là tạo thêm một website phiên bản di động, như giờ thi với phương pháp thiết kế giao diện thích ứng (Responsive web design) chúng ta hoàn toàn có thể sắp xếp nội dung trên trang web của chúng ta tùy theo màn hình thiết bị mà không cần phải viết thêm một website phiên bản di động nữa.

Giao diện thích ứng với kích thước màn hình
Giao diện thích ứng với kích thước màn hình

Demo môn học PHP tại CUSC

Responsive web design (RWD) hiểu một cách đơn giản là chúng ta sẽ bố trí lại nội dung của trang web tùy theo kích thước màn hình của thiết bị (hình trên). Nói là bố trí lại vì Responsive web design (RWD) chỉ đơn thuần là ẩn/hiện hay sắp xếp trật tự của nội dung trên trang mà thôi.

Với sự hỗ trợ của CSS3 (Media Queries năm 2012) và HTML5 thì phương pháp thiết kế này trở nên rất dễ thực hiện.
Ví dụ:

@media screen and (min-width:500px) { ... }

Giúp xác định kích thước của màn hình thiết bị và ràng buộc nếu nhỏ hơn 500px thì nội dung ở giữa sẽ được thực hiện. Như vậy chúng ta chỉ việc đặt tên cho các phần tử nội dung (html element) trên trang và xử lý chúng là được.

<html xmlns="http://www.0w3.org/1999/xhtml"&gt;
<head>
<!–viewport xac dinh kich thuot dung theo man hinh–>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="icon" type="image/ico" href="images/favorite.ico">
<title>Salomon shop</title>
<link href="css.css" rel="stylesheet" type="text/css" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="main">
<div id="header">
<h1>SALOMON</h1>
</div>
<div id="Skin_Menu_Ngang">
<ul id="nav">
<li><a href="?home">TRANG CHỦ</a></li>
<li style="border-right: 0px"><a href="?function=dk">ĐĂNG KÝ</a></li>
</ul>
</div>
<div id="noidung">
<div id="cotPhai"> Cot phai </div>
<div id="cotTrai"> cot trai </div>
</div>
<div id="footer"> Footer </div>
</div>
</body>
</html>

Chúng ta có giao diện như sau:
salomon1

Lưu ý dòng

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

Giúp xác định tỉ lệ scale và qui đổi điểm ảnh của màn hình thiết bị về px.
Ví dụ code css cho Demo môn học PHP tại CUSC như sau:

@media  screen and (max-width: 800px) {
#main {
	width:100%;
}

#header {
	width: 100%;	
	background-image:none;
	text-align:center;
	vertical-align:middle;
	height:70px;
}

#header h1{
	visibility:visible;
	display:inline-block;
	font-family:Arial, Helvetica, sans-serif;
	font-size:xx-large;
	color:#FFF;
} 

#trinhdon {
	width: 100%;
}
#footer {
	width: 100%;
}
#noidung {
	width: 100%;
}
#cotTrai {
	width: 100%;
}
#cotPhai {
	width: 100%;
}
}

@media screen and (max-width: 600px) {
#main {
	width: 100%;
}
#nav
{
	display:none;
}
#header {
	width: 100%;	
	background-image:none;
	text-align:center;
	vertical-align:middle;
	height:70px;
}

#header h1{
	display:inline-block;
	font-family:Arial, Helvetica, sans-serif;
	font-size:xx-large;
	color:#FFF;
} 

#trinhdon {
	width: 100%;
}
#footer {
	width: 100%;
}
#noidung {
	width: 100%;
}
#cotTrai {
	width: 100%;
}
#cotPhai {
	width: 100%;
}
}
 @media screen and (max-width:480px) {
#nav
{
	display:none;
}
#main {
	width: 100%;
}
#header {
	width: 100%;	
	background-image:none;
	text-align:center;
	vertical-align:middle;
	height:70px;
}

#header h1{
	display:inline-block;
	font-family:Arial, Helvetica, sans-serif;
	font-size:xx-large;
	color:#FFF;
} 
#trinhdon {
	width: 100%;
}
#footer {
	width: 100%;
}
#noidung {
	width: 100%;
}
#cotTrai {
	width: 100%;
}
#cotPhai {
	text-align:center;
	width: 100%;
	display:inline;
}
}

Ở đây tôi qui định nếu màn hình kích thướt lớn hơn 800px thì chúng ta có giao diện web trên máy tính với header và nội dung bố trí mặc định. Nếu lớn hơn 600px và nhỏ hơn 800px thì bố trí lại 02 phần trái phải theo chiều dọc, …

Gần đây Chrome hỗ trợ chức năng test giao diện trên các thiết bị động.
1. Nhấn F12 để vào chế độ developer
2. Chọn vào hình điện thoại ở của sổ code
3. Thay đôi kích thước màn hình bằng thướt đo hay chọn thiết bị.

Hi vọng là bài viết này có ích cho các bạn sinh viên tìm hiểu một cách căn bản nhất.

Một số bài thực hành php


Trang tim kiem san pham

Trang tai khoan-Lay lai mat khau

Trang san pham – hinh anh

Trang tai khoan-Chung thuc va phan quyen

Trang dang ky tai khoan

Nhung noi dung vao trang chu – menu ngang – menu trai

Nhung noi dung vao trang chu

Thuc hanh php – SQL

Thuc hanh sql

Trang chi tiet san pham – mua

Thuc hanh php

Ví dụ đơn giản CSS, Java script, HTML tạo một trang đơn giản


Ví dụ đơn giản CSS, Java script, HTML tạo một trang đơn giản
1. Trang đơn gian chưa có css


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>First test</title>
</head>
<script type="text/javascript">
function getBrowser()
{
	document.getElementById('caption').innerHTML = navigator.appName;
}

function pressKey(datename)
{
	if(!(event.keyCode >=47 && event.keyCode <= 57))
	{
		event.returnValue = false;
		document.getElementById('msgBirthDate').innerHTML = 'Number only';
	}
	else
	{	
		event.returnValue = true;
		document.getElementById('msgBirthDate').innerHTML = '';
	}
}

function nameChange()
{
	if(frm.txtFullName.value == '')
	{
		document.getElementById('msgName').innerHTML = 'Name not null';
	}
	else
	{
		document.getElementById('msgName').innerHTML = '';
	}
}

function addressChange()
{
	if(frm.txtAddress.value == '')
	{
		document.getElementById('msgAddress').innerHTML = 'Address not null';
	}
	else
		document.getElementById('msgAddress').innerHTML = '';
}

function educationChange()
{
	if(frm.education.value == 0)
	{
		document.getElementById('msgEducation').innerHTML = 'Select education';
	}
	else
		document.getElementById('msgEducation').innerHTML = '';
}

function dateChange()
{
	if(frm.txtDay.value == '' || frm.txtMonth.value == '' || frm.txtYear.value == '')
	{
		document.getElementById('msgBirthDate').innerHTML = 'BirthDate not valid';
	}
	else
		document.getElementById('msgBirthDate').innerHTML = '';
}

function apply()
{
	if(frm.txtFullName.value == '')
		document.getElementById('msgName').innerHTML = 'Name not null';
	if(frm.txtAddress.value == '')
		document.getElementById('msgAddress').innerHTML = 'Address not null';	
	if(frm.education.value == 0)
		document.getElementById('msgEducation').innerHTML = 'Select education';
	if(frm.txtDay.value == '' || frm.txtMonth.value == '' || frm.txtYear.value == '')
		document.getElementById('msgBirthDate').innerHTML = 'BirthDate not valid';
		
	if(frm.txtFullName.value != '' && frm.txtAddress.value != '' && frm.education.value != 0 && frm.txtDay.value != '' && frm.txtMonth.value != '' && frm.txtYear.value != '')
	{
		document.getElementById('results').innerHTML = 'FullName: '+ frm.txtFullName.value + ' <br/>' + 'Address: ' + frm.txtAddress.value + ' <br/>' + 'Education: ' + frm.education.value+ ' <br/>';
		
		getBrowser();
	}
}
</script>
<body>
<form name="frm" action="">
<table width="500" id='tbl'>
  <caption id='caption' align="bottom">
  Figure 01
  </caption>
  <tr>
    <th colspan="2" scope="col">APPLICATION FORM </th>
  </tr>
  <tr>
    <td class="captionText">Full name: </td>
    <td >
      <input name="txtFullName" type="text" class="txt" size="30" onkeyup="nameChange();"/>
    <label id="msgName" class="msg"></label></td>
  </tr>
  <tr>
    <td class="captionText">Address: </td>
    <td ><input name="txtAddress" type="text" class="txt" id="txtAddress" size="30" onkeyup="addressChange();"/>
      <label id="msgAddress" class="msg"></label></td>
  </tr>
  <tr>
    <td class="captionText">BirthDate: </td>
    <td ><input name="txtDay" type="text" class="txt" onkeypress="pressKey();" size="4" onkeyup="dateChange();"/>
      -
        <input name="txtMonth" type="text" class="txt" size="4" onkeypress="pressKey();" onkeyup="dateChange();"/>
        -
        <input name="txtYear" type="text" class="txt" size="10" onkeypress="pressKey();" onkeyup="dateChange();"/>
      <label id="msgBirthDate" class="msg"></label></td>
  </tr>
  <tr>
    <td class="captionText">Gender: </td>
    <td><input name="gender" type="radio" class="txt" value="m" checked="checked" />
      Male 
      <input name="gender" type="radio" class="txt" value="f" /> 
      Female  <label class="msg" id="msgGender"></label></td>
  </tr>
  <tr>
    <td class="captionText">Education: </td>
    <td >
	<select class="txt" id="education" onchange="educationChange();">
      <option value="0">----- Select one ------</option>
      <option value="1">HighSchool</option>
      <option value="2">University</option>
  	</select> <label id="msgEducation" class="msg"></label></td>
  </tr>
  <tr>
    <td colspan="2" align="center">
      <input name="btnApp" type="button" class="btnApply" onclick="apply();" /> </td>
  </tr>
  <tr>
    <td >&nbsp;</td>
    <td align="left" class="result" id="results" >&nbsp;</td>
  </tr>
</table>
</form>
</body>
</html>

2. Bổ sung thêm css như sau


/* CSS Document */
body
{
	font-size:10px;
	font-family:Arial, Helvetica, sans-serif;
	color:black;	
}
table
{
	border: #E7E7E7 solid 1px;
	margin-left:auto;
	margin-right:auto;
	vertical-align:middle;
}

table th
{
	background-color:#FFFFCC;
	color:#FF9F00;
	font-size:large;
	padding: 10px 10px 10px 10px;
}

table td
{
	padding: 3px 3px 3px 3px;
}

table caption
{
	color:#2A3F00;
	font-size:12px;
	font-style:italic;
}

.captionText
{
	text-align:right;
	width:40%;
}

.btnApply
{
	background:url(../themes/images/btnApp.jpg);
	background-repeat:no-repeat;
	background-position:center;
	height: 25px;
	width: 70px;
	border:none;
}

.result
{
	background-color:#336600;
	color:#FFFFFF;
	font-style:italic;
}

.msg
{
	color:#FF0000;
	font-size:10px;
}

.txt
{
	font-size:10px;
	font-family:Arial, Helvetica, sans-serif;
	color:black;	
	padding: 3px 3px 3px 3px;
}

Hình nút nhấn

Chúc vui vẻ

CSS button


This is very simple CSS for nice button

CSS code:

.buttons a, .buttons button{
    display:block;
    float:left;
    margin:0 7px 0 0;
    background-color:#f5f5f5;
    border:1px solid #dedede;
    border-top:1px solid #eee;
    border-left:1px solid #eee;

    font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
    font-size:12px;
    line-height:130%;
    text-decoration:none;
    font-weight:bold;
    color:#565656;
    cursor:pointer;
    padding:5px 10px 6px 7px; /* Links */
}
.buttons button{
    width:auto;
    overflow:visible;
    padding:4px 10px 3px 7px; /* IE6 */
}
.buttons button[type]{
    padding:5px 10px 5px 7px; /* Firefox */
    line-height:17px; /* Safari */
}
*:first-child+html button[type]{
    padding:4px 10px 3px 7px; /* IE7 */
}
.buttons button img, .buttons a img{
    margin:0 3px -3px 0 !important;
    padding:0;
    border:none;
    width:16px;
    height:16px;
}

/* STANDARD */

button:hover, .buttons a:hover{
    background-color:#dff4ff;
    border:1px solid #c2e1ef;
    color:#336699;
}
.buttons a:active{
    background-color:#6299c5;
    border:1px solid #6299c5;
    color:#fff;
}

/* POSITIVE */

button.positive, .buttons a.positive{
    color:#529214;
}
.buttons a.positive:hover, button.positive:hover{
    background-color:#E6EFC2;
    border:1px solid #C6D880;
    color:#529214;
}
.buttons a.positive:active{
    background-color:#529214;
    border:1px solid #529214;
    color:#fff;
}

/* NEGATIVE */

.buttons a.negative, button.negative{
    color:#d12f19;
}
.buttons a.negative:hover, button.negative:hover{
    background:#fbe3e4;
    border:1px solid #fbc2c4;
    color:#d12f19;
}
.buttons a.negative:active{
    background-color:#d12f19;
    border:1px solid #d12f19;
    color:#fff;
}

/* REGULAR */

button.regular, .buttons a.regular{
    color:#336699;
}
.buttons a.regular:hover, button.regular:hover{
    background-color:#dff4ff;
    border:1px solid #c2e1ef;
    color:#336699;
}
.buttons a.regular:active{
    background-color:#6299c5;
    border:1px solid #6299c5;
    color:#fff;
}